ブートストラップ4折りたたみ
基本的な折りたたみ可能
折りたたみ式は、大量のコンテンツを非表示にしたり表示したりする場合に便利です。
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
例
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
例の説明
クラスは折りたたみ可能な要素（この.collapse例では<div>）を示します。これは、ボタンをクリックするだけで表示または非表示になるコンテンツです。
折りたたみ可能なコンテンツを制御（表示/非表示）するには、data-toggle="collapse"属性を<a>または<button>要素に追加します。次に、属性を追加してdata-target="#id"、ボタンを折りたたみ可能なコンテンツ（<div id = "demo">）に接続します。
注： <a>要素の場合、href属性の代わりに属性を使用できdata-target
ます。
例
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
デフォルトでは、折りたたみ可能なコンテンツは非表示になっています。.showただし、デフォルトでコンテンツを表示するクラスを追加できます。
例
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
アコーディオン
痛み自体は重要ですが、痛みは脂肪症のプロセスによって強化されますが、私はそれを減らす時間を与えて、私がいくつかの素晴らしい仕事と痛みをするようにします。最小限に抑えるために、私たちの誰がそれからの結果を利用することを除いてどんな雇用も行使するべきです。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
次の例は、カードコンポーネントを拡張した単純なアコーディオンを示しています。
注：この属性を使用してdata-parent、折りたたみ可能なアイテムの1つが表示されたときに、指定された親の下にあるすべての折りたたみ可能な要素が閉じられるようにします。
例
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
完全なブートストラップ4折りたたみリファレンス
すべての折りたたみオプション、メソッド、およびイベントの完全なリファレンスについては、 Bootstrap 4JS折りたたみリファレンスにアクセスしてください。