Bootstrap 4 手风琴折叠/展开全部答案

【问题标题】：Bootstrap 4 Accordion Collapse / Expand AllBootstrap 4 手风琴折叠/展开全部
【发布时间】：2020-01-25 02:37:28
【问题描述】：

我想要一个链接（全部折叠），它将折叠所有手风琴，然后更改为“打开全部”以打开然后全部重新打开。

我找不到任何适用于 BS4 的东西，只有 BS3。

【问题讨论】：

标签： twitter-bootstrap bootstrap-accordion

【解决方案1】：

我认为 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

【讨论】：