アコーディオン ≪ コラップス ≪ JavaScript ≪ Bootstrap3日本語リファレンス

アコーディオンのように開閉するパネル。

サンプル

タイトルＡ

タイトルＡのコンテンツ

タイトルＢ

タイトルＢのコンテンツ

タイトルＣ

タイトルＣのコンテンツ

ソースコード

<div class="panel-group" id="sampleAccordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse1">
					タイトルＡ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse1" class="panel-collapse collapse in">
			<div class="panel-body">
				タイトルＡのコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse2">
					タイトルＢ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse2" class="panel-collapse collapse">
			<div class="panel-body">
				タイトルＢのコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse3">
					タイトルＣ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse3" class="panel-collapse collapse">
			<div class="panel-body">
				タイトルＣのコンテンツ
			</div>
		</div>
	</div>
</div>