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