Bootstrapを用いたアコーディオンの作成方法

Bootstrapを用いたアコーディオンの作成が思いのほか複雑だったので、備忘録として残しておきます。

ボタンを押すと隠れていた部分が表示されるような仕組みのこと。

よくあるのは、質問に対する回答集などですね。

ページを読み込んだ時点では質問部分のみが表示されていて、質問文をクリックすると回答が表示されるというものです。

コードが複雑になるのでまずはコードの骨格部分から。

骨格は以下の形です。

全体をdiv要素で囲み、.accordionをつける。
その中にdiv要素一つ作り、.accordion-itemをつける。
.accordion-itemの中にdiv要素を二つ作り、一つ目の方に.accordion-headerを、もう一方に.accordion-collapse .collapseつける。
.accordion-headerをつけた方が最初から表示されている部分、何もつけていない方が最初は隠れている部分になる。
.accordion-headerの内部にbutton要素を作り、".accordion-button .collapsed"を設定する。
表示させたい文字は、.accordion-buttonの中に書く。
.accordion-collapseをつけた方の中に.accordion-bodyを作成し、その中にaccordionで展開したい文字を記述する。

ここまでが、部品の作成になります。

次に、これらを関連付けて、ボタン操作で表示が切り替わるようにしていきます。

関連付けに関しては、各種部品にidを設定して行います。

また、accordion以外ではあまり使用しないような属性も登場します。

以下、手順です。

accordion全体、accordion-header, collapseそれぞれにidを設定する。
ここではそれぞれ#accordion, #headingA, #collapseAとする。
.accordion-buttonにdata-toggle="collapse", data-target=#collapseA", arial-controls="collapseA"arial-expanded="false"を設定。
.collapseにはarial-labelledby="headingA", data-parent="#accordion"を設定。

#をつけるところと付けないところがあるので注意しましょう。