Bootstrapでアコーディオンを簡単に実装する!

コーディング

Bootstrapイメージ

レスポンシブなレイアウトを簡単に実装できる「Bootstrap」。

素敵なデザインのテンプレートもたくさんあるので、利用している方も多いと思います。
何より豊富なコンポーネントが用意されているのが一番の魅力です。

ここではコンテンツを開閉できるアコーディオンの実装をご紹介します。

※理解を深めるためにも、Bootstrapのコンポーネント一覧をぜひご覧ください。

Bootstrapのコンポーネント一覧はこちら

collapseの使い方

コンテンツの開閉にはcollapseを使います。

実装はとても簡単で開閉のトリガーになるクリック部分(ボタンやテキスト)と、開閉するコンテンツ部分に要素を記述するだけです。

data-targetはhrefでも対応可能です。

参考:開閉で矢印の向きを変える

コンテンツが閉じているときは矢印を下向きに、コンテンツが開いているときは矢印を上向きにします。CSSだけで実装できます。

※矢印アイコンはFontAwesomeを利用しています。

FontAwesomeはこちら

aria-expanded=”true”はコンテンツが開いている状態のときに動的に記述される要素なので、この要素に上向き矢印のアイコンに書き換えています。

会場探しに困ったら…スペースコンシェルジュ eichiiiエイチ

最新記事