Bootstrapアコーディオンを設置しよう

Published on: 2023年6月29日
Category: Bootstrap
Tags: html,アコーディオン,コード,レイアウト,レスポンシブ
Author: SAKUWEB by Liruu Design

今回から、折り畳み式でクリックすると開閉するアコーディオンを作っていきます。

FAQなどによく利用されるアコーディオンは、

前回学んだドロップダウン付タブメニューと同じく場所の節約になります。

*-*-* Chapter44 *-*-*

アコーディオンを使ってみよう

FAQで利用されるアコーディオン
アコーディオンとはどんな仕組みか
ブレイクポイントで順番を変えよう
アコーディオンのコードを見てみよう
aria-expanded属性の役割
aria-controls属性の役割
「data-bs-parent」とは
アコーディオン「Flush」を設置しよう
アコーディオンの関連付けをしてみよう

FAQで利用されるアコーディオン

今回作るパーツは「テレビが好き」のリンク先コンテンツです。

「のぼりたい」と同じように「order」で順番を変えるパーツですね。

商品説明のパーツは、

「商品説明」「サイズ」のバーが配置されています。

バーをクリックすると、詳細情報が開く仕組みとなります。

FAQでよく利用されると言いましたが、

「商品説明」の箇所に質問を記載することで、

質問の一覧のみが並ぶことになるので、ユーザーが質問を探しやすくなりますし、

必要のない情報は隠れているので場所の節約にもなります。

アコーディオンとはどんな仕組みか

Components→Accordion→Flush

仕組みを確認するために、

サンプルの「Accordion Item #1」をクリックしてみましょう。

すると、バーの直下にテキストパーツが表示されると同時に、バーの背景色が変わりますね。

このまま「Accordion Item #2」をクリックすると、

「#1」のテキストパーツが閉じて、「#2」のテキストパーツが開きます。

再度「Accordion Item #2」をクリックすると、

「#2」のテキストパーツが閉じて、最初の状態に戻ります。

ブレイクポイントで順番を変えよう

まずは、テキストと画像パーツから作っていきましょう。

「のぼりたい」と同じ手順で作ればOKですね。

ブレイクポイントで要素の表示順を変えるには「order」を利用するんでしたね。

「order-md-●」を使って、テキストと画像の順番を変えましょう。

/* テキストパーツ */
<div class="order-md-2">テキスト</div>

/* 画像パーツ */
<div class="order-md-1">画像</div>

アコーディオンのコードを見てみよう

それでは「Flush」のコードを見ていきましょう。

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
    </div>
  </div>
</div>

ドロップダウン付タブメニューでは、先に全てのタブメニューを作ってから、中身のテキストを記述していましたね。

アコーディオンは、バーとテキストが同じコンテナに記述されていて、作り方が全く違います。

タイトルとテキストのセットを抜き出してみます。

<div class="accordion accordion-flush" id="accordionFlushExample">

  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        タイトル01
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">テキスト01</div>
    </div>
  </div>

</div>

「aria-labelledby属性」は要素とラベルを関連付けると前回学びましたね。

h2タグのid属性と、テキストパーツ最初のdivタグのaria-labelledby属性と関連付いています。

その他に、buttonタグのところに「aria-expanded属性」「aria-controls属性」「data-bs-parent」がありますね。

aria-expanded属性の役割

「aria-expanded属性」は、要素もしくは関連ついている要素が、

開いているか、閉じているかの開閉の状態を示す属性です。

開いていれば値は「true」、閉じていれば値は「false」となります。

aria-controls属性の役割

開閉させる要素のidを示す属性です。

サンプルコードだと、値が「flush-collapseOne」になっていますね。

テキストパーツの最初のdivタグにあるid属性と関連付いています。

この属性で開いたり閉じたりする要素を指定していきます。

「data-bs-parent」とは

「data-bs-parent」の値には、親要素のid属性を指定します。

サンプルコードだと一番最初、divタグのid属性に「accordionFlushExample」が入っていますね。

「data-bs-parent」にも同じ値が入っていて、自分の親が誰なのかを指定します。

「data-bs-parent」で指定した親要素「accordionFlushExample」内にあるすべてのアコーディンは、

デフォルトで閉じた状態にするという属性です。

アコーディオン「Flush」を設置しよう

サンプルコードをコピペしてください。

このままだと、ちょっとid名とかやたらと長いので、短く分かりやすくしていきましょう。

アコーディオンの関連付けをしてみよう

以下の手順で、関連付けの作業をやってみましょう。

「商品情報」の部分

1）h2タグのid属性を「prod」に変更し、

　テキストパーツの最初のdivタグの「aria-labelledby属性」も「prod」に変更して関連付けする

2）buttonタグの「data-bs-target」を「#prod04」に変更し、

　テキストパーツの最初のdivタグの「id属性」も「prod04」に変更して関連付ける

3）buttonタグの「aria-controls属性」を「prod04」に変更し、

　テキストパーツの最初のdivタグの「id属性」と関連付ける

4）一番最初、親要素のdivタグのid属性を「information」に変更し、

　テキストパーツの最初のdivタグの「data-bs-parent」を「#information」に変更して関連付ける

「テキスト」の部分

5）「商品情報」の1・2・3番の「prod」を「size」に変えて作る

それではコードを

<div class="accordion accordion-flush" id="information">
  <div class="accordion-item">
    <h2 id="prod" class="accordion-header">
      <button data-bs-target="#prod04" aria-controls="prod04" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false">
        商品情報
      </button>
    </h2>
    <div id="prod04" aria-labelledby="prod" data-bs-parent="#information" class="accordion-collapse collapse">
      <div class="accordion-body">
      
      <h3 class="h5">レトロなテレビルーム</h3>
      <p>ネコ専用のレトロなテレビの形をした隠れ家です。</p>
      <ul>
        <li>【レトロなデザイン】<br>70年代風のレトロなテレビを現代風にアレンジしたデザインです。</li>
        <li>【細部まで再現】<br>ダイヤルやアンテナなども再現しています。</li>
        <li>【カラバリ】<br>ブルー、ピンク、パープル、オレンジ、レッド、グリーン、ブラック、ホワイトの8色。</li>
      </ul>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 id="size" class="accordion-header">
      <button data-bs-target="#size04" aria-controls="size04" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false">
        サイズ
      </button>
    </h2>
    <div id="size04" aria-labelledby="size" data-bs-parent="#information" class="accordion-collapse collapse">
      <div class="accordion-body">
       <h3 class="h5">サイズ</h3>
      <ul>
        <li>【商品の寸法】幅520 × 奥行350 × 高さ789</li>
        <li>【重量】3kg</li>
        <li>【ブランド】SakuWeb</li>
      </ul>
      </div>
    </div>
  </div>
</div>

これでアコーディオンの「Flush」が完成です。

次回は、同じくアコーディオンを設置しますが、

今度はデフォルトで1つだけ開けて、1つは閉じる仕様のアコーディオンを設置していきます。