2018-05-10
2018-05-20
Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

HTMLで長い文章や説明文などが、折りたたみで表示されている事があると思います。 今回はBootstrapを利用して、HTML要素を折りたたむ方法を紹介します。
Bootstrapでhtml要素を折りたたむ際のサンプルコード
以下のソースをhtmlファイルに貼り付けて、そのまま展開すれば起動します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>テスト折り畳み</title> <!--CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <!--JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> /*アコーディオンの設定のためのCSS 特に必要はない */ .accordion { margin-top: 50px; } </style> </head> <body> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title"> <!-- ページ内リンクcollapse_test1で折りたたんでいるコンテンツとの紐付を行う --> <!-- a要素ではなくbutton要素でも稼働する --> <a data-toggle="collapse" href="#collapse_test1">通常デザインの折り畳みコンテンツ クリックして操作</a> </h1> </div> <div id="collapse_test1" class="panel-collapse collapse"> <div class="panel-body">普通にdiv要素で文章を記載するのでも可能</div> 折り畳み内のコンテンツはリスト要素を設定するのでも可能 <ul> <li>リスト要素1</li> <li>リスト要素2</li> <li>リスト要素3</li> </ul> <!--フッターは消去しても稼働する --> <div class="panel-footer">折り畳みコンテンツのフッター(消去可能)</div> </div> </div> </div> <div class="accordion">アコーディオン風</div> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#accordion1">アコーディオングループ1</a> </h4> </div> <div id="accordion1" class="panel-collapse collapse in"> <div class="panel-body">class="panel-collapse collapse in"のinが設定されていれば、折り畳みコンテンツがデフォルトで表示される</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#accordion2">アコーディオングループ2</a> </h4> </div> <div id="accordion2" class="panel-collapse collapse"> <div class="panel-body">アコーディオングループ2の内容</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#accordion3">アコーディオングループ3</a> </h4> </div> <div id="accordion3" class="panel-collapse collapse"> <div class="panel-body">アコーディオングループ3の内容</div> </div> </div> </div> </body> </html>
コード解説
通常の折りたたみ設定について
data-toggle="collapseがbootstrapの折りたたみコンテンツの表示、非表示を制御します。 ページ内リンクのcollapse_test1でボタンを押したときに表示するコンテンツを紐付ます。
<a data-toggle="collapse" href="#collapse_test1">
また、a要素ではなくbutton要素でも設定可能です。
アコーディオン風の折り畳みについて
最上部 id="accordion"が親要素となり、
<div class="panel-group" id="accordion">
子要素(アコーディオンの選択肢)へdata-parent="#accordion"を設定し、子要素と親要素を紐付ます。
<a data-toggle="collapse" data-parent="#accordion" href="#accordion1">アコーディオングループ1</a>
以上
その他詳細なコードの解説はhtmlのコメントをご覧ください。
関連記事
htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き
Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き
Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き
あなたにお勧めの記事
前の記事
2018/05/09
次の記事
2018/05/10