折りたたみ

Collapse

折りたたみ機能は、大量のコンテンツを非表示にして表示する場合に便利です。

Bootstrapは、モバイルファーストウェブサイトを開発するための最も一般的なHTML、CSS、およびJavaScriptフレームワークです。
BootstrapはWeb開発のための無料のフロントエンドフレームワークです。
Bootstrapには、タイポグラフィ、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセルなどのJavaScriptテンプレートとオプションのJavaScriptプラグイン用のHTMLおよびCSSベースのデザインテンプレートが含まれています。
Bootstrapを使用すると、レスポンシブデザインを簡単に作成することができます。

.collapse クラスは、折りたたみ可能な要素を示します。これは、ボタンのクリックで表示または非表示にするコンテンツです。
折りたたみ可能なコンテンツを制御（表示/非表示）するには、 data-toggle="collapse" 属性を <a> または <button> 要素に追加します。次に、 data-target="#id" 属性を追加して、ボタンを折りたたみ可能なコンテンツ（ <div id="demo"> ）に接続します。

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">click me</button>
<div id="demo" class="collapse">
Bootstrapは、モバイルファーストウェブサイトを開発するための最も一般的なHTML、CSS、およびJavaScriptフレームワークです。<br/>
BootstrapはWeb開発のための無料のフロントエンドフレームワークです。<br/>
Bootstrapには、タイポグラフィ、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセルなどのJavaScriptテンプレートとオプションのJavaScriptプラグイン用のHTMLおよびCSSベースのデザインテンプレートが含まれています。<br/>
Bootstrapを使用すると、レスポンシブデザインを簡単に作成することができます。
</div>

ヒント： <a> 要素の場合、 data-target 属性の代わりに href 属性を使用できます。

click me

テキスト

<a href="#demo1" data-toggle="collapse">click me</a>
<div id="demo1" class="collapse">テキスト</div>

折りたたみパネル

click me

内容

フッター

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">click me</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">内容</div>
      <div class="panel-footer">フッター</div>
    </div>
  </div>
</div>

折りたたみリストグループ

click me

One
Two
Three

フッター

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse2">click me</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">フッター</div>
    </div>
  </div>
</div>

アコーディオン

次の例は、パネルコンポーネントを拡張することによって単純なアコーディオンを表示しています。

ヒント： 折りたたみ可能なアイテムの1つが表示されているときに、指定した親の下にあるすべての折りたたみ可能な要素と連動するには、 data-parent 属性を使用します。

<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="#collapse3">グループ1</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse in">
      <div class="panel-body">内容</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">グループ2</a>
      </h4>
    </div>
    <div id="collapse4" class="panel-collapse collapse">
      <div class="panel-body">内容</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">グループ3</a>
      </h4>
    </div>
    <div id="collapse5" class="panel-collapse collapse">
      <div class="panel-body">内容</div>
    </div>
  </div>
</div>