Bootstrap3
日本語リファレンス

広告

button要素で開閉


button要素で開閉する方法。

ポイントは2つ。

  1. button要素のdata-toggle属性にcollapseを指定する。
  2. 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>
サンプル

表示したり、折り畳んだりできるコンテンツ。【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>

広告