button要素で開閉
button
要素で開閉する方法。
ポイントは2つ。
button
要素のdata-toggle
属性にcollapse
を指定する。button
要素のdata-target
属性に、表示したり、折り畳んだりするコンテンツのid
属性値やclass
属性値を指定する。
1つのコンテンツを開閉
サンプル
表示したり、折り畳んだりできるコンテンツ。
ソースコード
<p> <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#collapseSample1"> 表示/非表示 </button> </p> <div class="collapse" id="collapseSample1"> <div class="well"> 表示したり、折り畳んだりできるコンテンツ。 </div> </div>
複数のコンテンツを開閉
サンプル
表示したり、折り畳んだりできるコンテンツ。【1】
表示したり、折り畳んだりできるコンテンツ。【2】
表示したり、折り畳んだりできるコンテンツ。【3】
ソースコード
<p> <button type="button" class="btn btn-default" data-toggle="collapse" data-target=".collapseSample2"> 表示/非表示 </button> </p> <div class="collapse collapseSample2"> <div class="well"> 表示したり、折り畳んだりできるコンテンツ。【1】 </div> </div> <div class="collapse collapseSample2"> <div class="well"> 表示したり、折り畳んだりできるコンテンツ。【2】 </div> </div> <div class="collapse collapseSample2"> <div class="well"> 表示したり、折り畳んだりできるコンテンツ。【3】 </div> </div>