Bootstrapを使ってみる。アコーディオン編(Collapse)


Bootstrapを使ってみよう。アコーディオン編(Collapse)

Bootstrapで用意されている「Collapse」を利用してみよう。

「Collapse」は「よくある質問」などのページで質問をクリックすると回答欄がスルッと現れる展開型のアコーディオンパネルが作れるJavascript。サイドメニューの展開にも使われるものです。

Bootstrap


*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Bootstrap「collapse」の利用HTML編

Bootstrapのサイト[Accordion example]のソースをコピー&ペーストする。
(Bootstrapサイト → Javascript → Collapse → Accordion example)
ペーストしたら必要箇所を変更する。
または下記のソースをコピーしてペースト。

今回はデモとして2組のアコーディオンを設置してみる。

ポイント
:a hrefのIDはどこのパネルを開くかの指定。なので各パネルのIDと合わせる。
:1つ目のパネルがサイトアクセス時展開されているのはクラスに「collapse in」を指定しているから。

デモを見る
collapse

以上、基本的な使い方備忘録。

*追記
ボタンタイプのCollapseを追加。
右側のボタン「ボタンだよ」の中に入力した文章を、左側のボタン「隣のボタンの中身を表示するよ」をクリックするとリンクで表示する。

ソース

デモ

以上。

*— 追記 —*
パネルグループを2つ使っていたが、グループIDが同一だったため、不具合が生じていた。
具体的には、「システムについて」側のパネルを展開 → 他のパネル展開という動作時に本来は自動で閉じる動きなのだが、閉じない現象。

対策

パネルグループを複数使うときはそれぞれのグループごとにIDを変える。
グループIDとdata-parent=””は同じものを指定する。
逆を言えば、自動で閉じない設定にすることも可能。その場合はパネルグループにIDを付与しない。

訂正後のソース(閉じない設定を追加)

デモ
bootstrap-collapse

以上


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL