ハマログ

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

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日


関連記事

AWSのVPCとサブネットの予約済みIPv4アドレスについて

今月より、レガシーなOSで動作しているウェブシステムをAWSに移行する作業をして…

bash でテキストファイルの内容を環境変数に設定する

bash でテキストファイルの内容を環境変数に設定するのにはまったので、覚え書き…

便利ツール見つけた

便利ツール見つけました。 これでサーバーにリクエストを送り放題。ダミーとして使え…


← 前の投稿

次の投稿 →