Bootstrapでアコーディオンを簡単に実装する！
コーディング
レスポンシブなレイアウトを簡単に実装できる「Bootstrap」。
素敵なデザインのテンプレートもたくさんあるので、利用している方も多いと思います。
何より豊富なコンポーネントが用意されているのが一番の魅力です。
ここではコンテンツを開閉できるアコーディオンの実装をご紹介します。
※理解を深めるためにも、Bootstrapのコンポーネント一覧をぜひご覧ください。
collapseの使い方
コンテンツの開閉にはcollapseを使います。
実装はとても簡単で開閉のトリガーになるクリック部分（ボタンやテキスト）と、開閉するコンテンツ部分に要素を記述するだけです。
|
1 2 3 4 5 6 |
<dl class="accordion-box"> /* クリック部分にdata-toggle="collapse"と data-target="#id-name"を記述 */ <dt data-toggle="collapse" data-target="#id-name">アコーディオンタイトル</dt> /* 開閉コンテンツ部分にid="id-name"とclass="collapse"を記述 */ <dd id="id-name" class="collapse">開閉するコンテンツ。情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</dd> </dl> |
data-targetはhrefでも対応可能です。
|
1 2 3 4 5 |
<dl class="accordion-box"> /* data-targetの代わりにhrefを使用 */ <dt><a href="#id-name" data-toggle="collapse">アコーディオンタイトル</a></dt> <dd id="id-name" class="collapse">開閉するコンテンツ。情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。 とかくに人の世は住みにくい。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。山路を登りながら、こう考えた。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。智に働けば角が立つ。 </dd> </dl> |
参考：開閉で矢印の向きを変える
コンテンツが閉じているときは矢印を下向きに、コンテンツが開いているときは矢印を上向きにします。CSSだけで実装できます。
※矢印アイコンはFontAwesomeを利用しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
dt:after { content: " \f078"; font-family: FontAwesome; color: #3c8dbc; } /*aria-expanded="true"はコンテンツが開いている状態のときに動的に記述される要素です。*/ dd[aria-expanded="true"]:after { content: " \f077"; font-family: FontAwesome; color: #3c8dbc; } |
aria-expanded=”true”はコンテンツが開いている状態のときに動的に記述される要素なので、この要素に上向き矢印のアイコンに書き換えています。
