ハマログ

株式会社イーツー・インフォの社員ブログ

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イベントを処理すれば、確認メッセージなどを表示できます。

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

Bootstrapcollapseアコーディオン

  S.I   2017年11月21日


関連記事

MariaDBのVARCHAR(10)には何文字格納できるでしょうか?

こう聞かれれば「半角10文字、全角5文字」と答える人が多いのではないでしょうか。…

Laravelでブラウザテストを実行する(Laravel Dusk)

いままでブラウザテストの環境は、Codeceptionとか、Seleniumとか…

AWS ChatbotでSlackに通知する

AWSからの通知をSlackに連携する場合、いくつかの選択肢がありますが、AWS…


← 前の投稿

次の投稿 →