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