Bootstrapのcollapseコントロールでアコーディオンの実装

collapseコントロールは、クリックすると、その内容を折り畳むことができるコントロールです。
「アコーディオンコントロール」と呼ばれることもあります。

多くの場合は、パネルに対して適用して、パネルのヘッダーがクリックされたときに、その中身を表示／非表示するときに使います。
実際には、適用先がパネルにある必要はなく、任意の要素に対して「表示／非表示」を切り替えられます。

とても簡単に実装できておしゃれなのでご紹介させていただきます。

アコーディオン例はこちら

collapseコントロールのAPIとイベントの一例

データ属性

aなどのリンク要素にdata-toggle=”collapseを追加することで、collapseコントロールのイベントハンドラを有効にし、クリックしたときに閉じたり開いたりできるようにします。

メソッド

.collapse(‘toggle’)…トルグを動作する
.collapse(‘show’)…表示する
.collapse(‘hide’)…非表示にする

イベント

show.bs.collapse…表示されようとするときに発生する
shown.bs.collapse…表示されたときに発生する
hide.bs.collapse…閉じられようとするときに発生する
hidden.bs.collapse…閉じられたときに発生する

パネルグループを構成して、どれかひとつだけを表示することもできます。
また、「閉じようとしたとき」などにhide.bs.collapseイベントを処理すれば、確認メッセージなどを表示できます。

表示するコンテンツが長くなったときや、切り替えたいとき、折り畳んだりすると見やすくなって良いですね( ^ω^ )