Bootstrapを活用しよう! [ Ⅹ. アコーディオン機能]

皆さん、本日もお疲れ様です。
今日は、午後から都内にて打ち合わせのため外出したのですが、思いのほか寒くてびっくりしました。私の地元でもかなり気温が下がっているとのことでしたので、そろそろ秋服の準備が必要そうですね!!

また...近頃は、気分が落ち気味になると甘いものの摂取に走ってしまうのが少し悩みです💦

本日は、Bootstrapの中でも
「アコーディオン機能」
について解説させて頂ければと思っております。

Bootstrapの活用 : アコーディオン機能

Bootstrapの活用 : アコーディオン機能

アコーディオン機能とは??

==============================================

✫ サイトのWebページなどの表示・操作要素の一つで、選択した項目がその場で広がって詳細な内容を表示する形式の\メニューである。

[ サンプル動画 ]

youtu.be

==============================================

複数のブロックを操作 <デフォルトの折り畳み>

● アコーディオン機能といえばあるボタンや領域をクリックした際に
指定の領域を開け閉めすることが可能になります。
そこで、複数条件を指定し、各ボタンごとに表示する領域を選択できるようにしてみましょう。

[ コード ]

<!--  HTML  -->
<p style="margin-left: 15px;">
　<!-- href="表示させる領域のidを指定" -->
    <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">認証キーの入力</a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">ログイン情報の入力</button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">両方</button
</p>
<div class="row">
    <div class="col">
　　 <!-- id="領域のidを指定" -->
        <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body" style="width:300px; margin-left:15px;">
                 <form>
                      <span>認証キー:  </span>
                           <input type="password" name="freedom">
                 </form>
             </div>
         </div>
     </div>
     <div style="margin-right: 54%">  
          <div class="collapse multi-collapse" id="multiCollapseExample2">
               <div class="card card-body"  style="width:300px;">
                   <form>
                        <span>ID:  </span><br>
                             <input type="text" name="id"><br>
                        <span>PassWord:  </span><br>
                             <input type="password" name="password">
                  </form>
             </div>
         </div>
     </div>
</div>

　　　↓

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

[ 実行結果 ]

★ クリックするボタンに応じて、表示させる領域を変化させています。

youtu.be

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

折り畳みを拡張 : アコーディオンを実現

上記の複数のボタンクリック操作にて、表示結果を変える方法は、折り畳みの方法の中でもデフォルトになっております。
次は、そのデフォルトの折り畳みを拡張し、実際に本ページの冒頭にサンプルとして紹介させて頂いたアコーディオン機能を作成してみましょう。

[ コード ]

<span style="margin-left:15px">【 チーム紹介 】</span>
    <div class="accordion" id="accordionExample" style="width:500px; margin: 15px 15px;">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <!-- data-target = "表示させる領域を指定""-->
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            野球 : チームリスト
                    </button>
                </h2>
            </div>
            <!-- id="表示領域の名前"-->
            <!-- data-parent="親要素の指定" -->
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    <span>● 読売ジャイアンツ</span><br>
                    <span>● 阪神タイガーズ</span><br>
                    <span>● 中日ドラゴンズ</span><br>
                    <span>● 横浜DeNAベイスターズ</span><br>
                    <span> ・・・・</span>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            サッカー : チームリスト
                    </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    <span>● 鹿島アントラーズ</span><br>
                    <span>● ガンバ大阪</span><br>
                    <span>● 浦和レッズ</span><br>
                    <span>● 川崎フロンターレ</span><br>
                    <span> ・・・・</span>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            ラグビー : チームリスト
                    </button>
                </h2>
            </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                <span>● パナソニック ワイルドナイツ</span><br>
                <span>● NECグリーンロケッツ</span><br>
                <span>● トヨタ自動車ヴェルブリッツ</span><br>
                <span>● 東芝ブレイブルーパス</span><br>
                <span> ・・・・</span>
            </div>
        </div>
    </div>