Bootstrap 4 Accordion Collapse / Развернуть все - PullRequest
Новая
       35

Bootstrap 4 Accordion Collapse / Развернуть все

0 голосов
/ 25 сентября 2019

Я хотел бы иметь ссылку (Свернуть все), которая свернет все аккордеоны, а затем изменится на «Открыть все», чтобы снова открыть все снова.

Я не смогнайти что-нибудь, что работает с BS4, только BS3.

1 Ответ

0 голосов
/ 26 сентября 2019

Я не думаю, что в BS4 есть быстрый класс CSS, который это делает.Может быть что-то вроде ниже может помочь!? 

#showall[data-toggle="collapse"]:after {
  content: "Hide All";
}

#showall[data-toggle="collapse"] .collapsed .show :after {
  content: "Show All";
}

#showall[data-toggle="collapse"].collapsed:after {
  content: "Show All";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<button type="button" class="m-2 btn btn-sm btn-success collapse show" id="showall" data-toggle="collapse" data-target="#div1,#div2"> </button>
<div data-parent="#showall" id="div1" class="card collapse show p-3">
  Content 1
</div>
<div data-parent="#showall" id="div2" class="card collapse show p-3">
  Content 2
</div>

https://codepen.io/R1112/pen/YzKMGEp

...