【Bootstrap】アコーディオンを利用(メニュー・Table)| コピペ可能

  • このエントリーをはてなブックマークに追加

アコーディオンとは、ターゲット要素をクリックし、非表示になっている要素が開閉するWebページなどの表示・操作要素のことです。ユーザーが必要な最低限の情報を表示し、詳細情報を見たい場合のみ任意で表示できるため、よく利用されるユーザーインターフェースの1つです。

今回はBootstrapを利用し、アコーディオンメニューの作成方法とアコーディオンTableの作成方法をサンプルコードを提示しながら説明します。

  1. メニュー作成(下準備)
  2. Bootstrapを利用してアコーディオンメニューに変更
  3. Table作成(下準備)
  4. Bootstrapを利用してTableをアコーディオンにする

 1. メニュー作成(下準備)

アコーディオンメニューとはメニュー項目クリックで子メニューが開閉し、表示・非表示を切り替えられるメニュー形式のことです。メニュー項目が多い場合は特に有効なデザインテクニックです。
アコーディオンメニュー作成の下準備として、一般的なメニューを作成します。

●Html

●Css(クリックするメニュー項目をわかりやすくする)

作成したメニューは以下のようになります。

 2. Bootstrapを利用してアコーディオンメニューに変更

【Bootstrap】Class(開閉対象要素に付ける)

collapse コンテンツを非表示にする
collapse show コンテンツを表示する

【Bootstrap】data属性(要素を開閉するためのトリガー要素に付ける)

data-toggle=”collapse” 指定要素を開閉するためのトリガー要素
data-target=”#開閉要素のターゲットId” どの要素を開閉するのか指定

【Bootstrap】aria属性(要素を開閉するためのトリガー要素に付ける)

aria-expanded=”true”、aria-expanded=”false” 初期状態で開いておくのか否か
aria-controls=”開閉要素のターゲットId”

Bootstrapを利用して、第一章で作成したメニューをアコーディオンメニューに変更します。

●Html

★Point

「child-menuitem-list」クラスを開閉対象要素にする(「collapse」クラスを付ける)とアコーディオンのアニメーションがカクつくので注意してください。

Bootstrapを利用して作成したアコーディオンメニューは以下のようになります。メニュー項目をクリックすると、子メニューの表示・非表示が切り替わるように変更できました。

 3. Table作成(下準備)

指定したテーブル行を折りたたむアコーディオンテーブルを作成します。その下準備として、Bootstrapを利用したテーブルを作成します。

●Html

部署名と社員数が表示されている行の下に、部署に所属している社員一覧を表示する行があるテーブルを作成しました。
部署名と社員数が表示されている行をクリックし、赤枠部分(社員一覧の行)を開閉するアコーディオンテーブルに変更します。

 4. Bootstrapを利用してTableをアコーディオンにする

●Html

第三章で作成したテーブルをアコーディオンテーブルに変更します。
折りたたむ(「collapse」クラスを付ける)要素を間違えると、開閉できなかったり、アニメーションが正しく行われないため注意が必要です。「collapse」クラスを付ける要素を3例上げて、どうすれば適切にアコーディオンスタイルが実現されるのか見てみましょう。

  1. 「td」の下に<div>要素を作成し「collapse」クラスを付け、その<div>要素の中に折りたたみたいコンテンツを入れる
    →「td」のpadding: 0にする必要があります。
  2. 「td」に「collapse」クラスを付ける
  3. 「tr」に「collapse」クラスを付ける

上記の3パターンでテーブル行のHtmlを作成しました。正しくアコーディオンのアニメーションが動作するか確認します。

【開発部:tdの下に追加したdiv要素に「collapse」クラス追加】
 スムーズにアコーディオンのアニメーションが動作します
【営業部:tdに「collapse」クラス追加】
 開閉はできますが、アニメーションが無くなります
【業務部:trに「collapse」クラス追加】
 開閉はできますが、アニメーションが無くなります

TableでBootstrapのアコーディオンを利用する際は、「collapse」クラスを付ける要素に気をつけてください。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*