bootstrap4 を使ってアコーディオンを左右に広げる

Question

bootstrap4 を使ったアコーディオンで
縦横に広がる（：広がった窓の中にトリガーも含まれるようにする）
にはどうしたらいいでしょうか

 -------
| ラベル |
 -------

という状態からクリックすると

 -----------------
| ラベル  サブ見出し  |
|                 |
|   コンテンツ       |
|                 |
 ----------------

という感じにしたいです

追記：

bootstrap って
href="#id"
data-target="#id"
で 1 つの要素しか表示変更できないんでしょうか

hidden checkbox をつかって

<div>
  <label>ラベル</label><input type="checkbox" id="id"><span class="collapse">サブ見出し</span>
  <div class="collapse">コンテンツ</div>
</div>

input[type=checkbox]#id {
  & { display:none; }
  &:checked~ * { display:block; }
  &:not(:checked) ~ * { display:none; }
}

みたいに複数要素を出現できればいいんですけどね…

Answer 1

閉じるとcollapsedがつくのでこうするとか。

        <div data-toggle="collapse" data-target="#hoge">
          label
          <span>sub</span>
        </div>

.collapsed span {
  display: none;
}

-- 追記を受けてHTMLのみで

        <div data-toggle="collapse" data-target=".hoge">
          label
          <span class="collapse show hoge">sub</span>
        </div>

Comments

[退会済みユーザー]

あー　ごめんなさい
bootstrap を使って = HTML のみで CSS をかかないで
という意味でした

追記がかえってまぎらわしかったですね…
申し訳ないです

[退会済みユーザー]

わー　すごい
data-target="" にはクラスも指定できるんですね
ID だけかと思ってました
これなら複数の要素に同じクラスを指定すれば表示の切り替えができるわけですね
ありがとうございました
使わせていただきます