See the Pen Bootstrapでアコーディオン by 熊瀬川直也 (@momonoki1990) on CodePen.
- BootstrapはCSS・JSどちらも読み込む(https://getbootstrap.jp/)
- 全体を
ulで囲み、親+子の1セットをliで囲む(この辺はアコーディオンとは直接関係ないのでなんでもよし) - 子要素に
class="collapse"をつけてつぶす。また、id="target1"もつけておく - 親要素に
data-toggle="collapse" data-target="#target1"をつける。「トグル(スイッチ)」とは一般的に切り替えスイッチのことで、ここでは「開閉を切り替えるためのスイッチ」かな。 -
data-toggle="collapse"を指定することでその要素がアコーディオンを開閉するためのスイッチとなる。 -
data-targetで開閉対象を指定する。子要素のidをセットする。#をつけるのを忘れず。 -
data-targetにセットするidは固有にすること。子要素すべてに同じidを付与(この時点で問題だが)してそれをセットすると、一つのボタンを押すことで全てが開閉してしまう。 - 親要素に付加する
aria-expand="false" aria-controls="target1"はどちらも読み上げブラウザに付加情報を与えるもので、aria-expandは開閉状態、aria-controlsは開閉対象を示す。 - 矢印は
position: absoluteで浮かせて、position: relativeをセットした親要素に対する相対位置で位置を定める。
参考
とほほのBootstrap 4入門
http://www.tohoho-web.com/bootstrap/collapse.html