Bootstrap - Collapse: 初心者向けの包括ガイド

こんにちは、ウェブ開発者の卵さんたち！今日は、Bootstrapの最も便利なコンポーネントの一つであるCollapseについて深く掘り下げます。これをウェブページの魔法のトリックと考えてください - ある瞬間には見えるのに、次の瞬間には見えなくなります！一緒にこの興奮する旅に出発しましょう。

Bootstrap - Collapse

Bootstrap Collapseとは？

コードに飛び込む前に、Collapseとは何についているかを理解しましょう。ウェブサイトに長い記事があるとしますが、訪問者を一気にすべてのテキストで圧倒したくありませんよね。ここでCollapseが助け舟 becomes! クリック 한つのでコンテンツを隠したり表示したりできるようにし、ウェブページをよりインタラクティブでユーザーフレンドリーにします。

基本的な例

まず、基本的な例から始めてみましょう。

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
秘密を暴露するにはクリックして！
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
秘密は…Bootstrapを学んでいるあなたが素晴らしいことです！
</div>
</div>

これを分解してみましょう：

クリックでCollapseをトリガーするボタン（リンクのようにスタイル付けされています）があります。
data-bs-toggle="collapse"属性は、この要素が折り畳み可能なエリアをコントロールしていることをBootstrapに伝えます。
href="#collapseExample"は、折り畳みコンテンツのIDを指しています。
折り畳みコンテンツは、collapseクラスと一致するIDを持つdivでラップされています。

ボタンをクリックすると、BootstrapのJavaScript魔法が起動し、コンテンツが表示されたり非表示になったりします。

水平Collapse

次に、水平なCollapseを少し楽しみましょう。コンテンツが横方向に隠れたり表示されたりする遊びです！

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
幅の折り畳みを切り替える
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
これは水平Collapseのプレースホルダーコンテンツです。デフォルトでは非表示であり、トリガーされたときに表示されます。
</div>
</div>
</div>

ここでの主要な違いは：

collapse-horizontalクラスをcollapseクラスと一緒に使用しています。
折り畳みコンテンツに特定の幅を設定しています。
外側のdivにmin-heightを設定して、Collapseが切り替わるときに他の要素がジャンプしないようにしています。

複数のトグルとターゲット

次に、折り畳み要素のシンフォニーを創りましょう！複数のボタンで異なる（または同じ）折り畳みエリアをコントロールすることができます。

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">最初の要素を切り替える</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">二番目の要素を切り替える</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">両方の要素を切り替える</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
このマルチCollapse例の最初の折り畳みコンポーネントのためのプレースホルダーコンテンツ。
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
このマルチCollapse例の二番目の折り畳みコンポーネントのためのプレースホルダーコンテンツ。
</div>
</div>
</div>
</div>

ここで起こっていること：

3つのボタンがあります：2つは個別のCollapseをコントロールし、1つは両方をコントロールします。
三番目のボタンは.multi-collapseを使用して、両方の折り畳みエリアをターゲットにします。
各折り畳みエリアにはユニークなIDとmulti-collapseクラスがあります。

アクセシビリティ

責任ある開発者として、私たちはウェブサイトがすべての人にとってアクセシブルであることを確保する必要があります。BootstrapのCollapseコンポーネントには、組み込みのアクセシビリティ機能がありますが、それを強化することができます：

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
アクセシブルなCollapseボタン
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
このコンテンツは非表示ですが、スクリーンリーダーにはアクセシブルです。
</div>
</div>

主要なアクセシビリティ機能：

aria-expanded属性は、スクリーンリーダーに折り畳みコンテンツが現在表示されているかどうかを伝えます。
aria-controls属性は、ボタンと折り畳みコンテンツを関連付けます。

メソッドテーブル

以下は、JavaScriptで使用できるCollapseメソッドの便利なテーブルです：

メソッド	説明
`collapse('toggle')`	折り畳み要素を切り替えます
`collapse('show')`	折り畳み要素を表示します
`collapse('hide')`	折り畳み要素を非表示にします
`collapse('dispose')`	要素のCollapseを破壊します

これらのメソッドを使用するには、以下のようにします：

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

そして、ここまでがBootstrap Collapseの芸術です！練習すれば完璧になりますので、これらの例を試してみてください。すぐに、あなたのウェブページが折り畳みや展開するOrigamiのように見えるようになります！

ハッピーコーディング、そしてあなたのCollapseが常にスムーズで、トグルが常に反応的でありますように！

Credits: Image by storyset