Bootstrap 5 フェルマ

コース推薦：

基本的な折りたたみ

例

多くの内容を隠したり表示したりしたい場合、折りたたみコンポーネントは非常に便利です：
<div id="demo" class="collapse">
  <p>胜日寻芳泗水滨，无边光景一时新。</p>
  <p>等闲识得东风面，万紫千红总是春。</p>
</div>

自分で試してみる

<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button>

例解 .collapse

クラスを折りたたみ可能な要素（この例では<div>）に指定します；ボタンをクリックすることで、表示や非表示の内容が変わります。 折りたたみ可能な内容（表示/非表示）を制御するために、以下のクラスを設定します： data-bs-toggle="collapse" 属性を<a>または<button>要素に追加します。その後、以下の追加を行います：data-bs-target="#id "

注釈：<a>要素に対して、以下の属性を使用してボタンと折りたたみ可能な内容を結びつけることができます（<div id="demo">）： href 属性を代替して data-bs-target 属性：

例

<a href="#demo" data-bs-toggle="collapse">春日</a>
<div id="demo" class="collapse">
  <p>胜日寻芳泗水滨，无边光景一时新。</p>
  <p>等闲识得东风面，万紫千红总是春。</p>
</div>

自分で試してみる

デフォルトでは、折りたたみ可能な内容は非表示です。しかし、以下の追加を行うことができます： .show クラスを使用してデフォルトで内容を表示する：

例

<div id="demo" class="collapse show">
  <p>胜日寻芳泗水滨，无边光景一时新。</p>
  <p>等闲识得东风面，万紫千红总是春。</p>
</div>

自分で試してみる

Accordion（アコーディオン）

以下例で card コンポーネントを拡張し、簡単なアコーディオンを表示します。

注釈：使用 data-bs-parent 属性は、表示されている折りたたみプロジェクトのいずれかが指定された親要素の下にあるすべての折りたたみ要素を閉じることを確実にします。

例

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        折りたたみグループプロジェクト #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>春日</h3>
        <p>胜日寻芳泗水滨，无边光景一时新。</p>
        <p>等闲识得东风面，万紫千红总是春。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        折りたたみグループプロジェクト #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>初夏绝句</h3>
        <p>纷纷红紫已成尘，布谷声中夏令新。</p>
        <p>夹路桑麻行不尽，始知身是太平人。</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        折りたたみグループプロジェクト #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>山行</h3>
        <p>远上寒山石径斜，白云生处有人家。</p>
        <p>停车坐爱枫林晚，霜叶红于二月花。</p>
      </div>
    </div>
  </div>
</div>

自分で試してみる