Bootstrap3ではCollapseという要素を開閉するjavascriptが用意されています。 よく呼ばれているアコーディオンパネルのことです。
単純に1つのボタンを押すと指定したIDを開閉する場合と、3つのブロックのタイトルを押すとそれぞれのセクションを開閉するサンプルを紹介します。
bootstrapのjsを読み込ませておけば、Jaascriptの追加記述は不要です。
単純に1つのボタンを押すと指定したIDを開閉する場合
HTML
data-target=の個所で開閉する対象のIDを指定します。 開閉する対象のIDにinのclass指定をするとデフォルトで開いた状態になります。
<section>
<h2>コンテンツを最初は非表示</h2>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#sample">コンテンツを開く </button>
<div id="sample" class="collapse">
<div class="panel panel-default">
<div class="panel-body">
<h3>アコーディオンの中身</h3>
<p>コメントコメントコメントコメントコメントコメントコメント </p>
</div>
</div>
</div>
</section>
<hr>
<section>
<h2>コンテンツを最初から表示</h2>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#sample2">コンテンツを開く </button>
<div id="sample2" class="collapse in">
<div class="panel panel-default">
<div class="panel-body">
<h3>アコーディオンの中身</h3>
<p>コメントコメントコメントコメントコメントコメントコメント </p>
</div>
</div>
</div>
</section>
<hr>
3つのブロックをtoggleで開閉する場合
HTML
３つのブロックを開閉できるようにします。 スタイルシートを加えてあげると、タイトル横のアイコンを開閉時で変えることができます。
<section>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title accordion-toggle">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">セクション1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<h3>アコーディオンの中身1</h3>
<p>コメントコメントコメントコメントコメントコメントコメント </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title accordion-toggle">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">セクション2 </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h3>アコーディオンの中身2</h3>
<p>コメントコメントコメントコメントコメントコメントコメント </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title accordion-toggle">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">セクション3 </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h3>アコーディオンの中身3</h3>
<p>コメントコメントコメントコメントコメントコメントコメント </p>
</div>
</div>
</div>
</div>
</section>
CSS
<style type="text/css">
.panel-heading {
cursor: pointer;
}
.accordion-toggle a:after {
font-family: 'Glyphicons Halflings';
content:"\e113";
float: right;
color: inherit;
}
.accordion-toggle a.collapsed:after {
font-family: 'Glyphicons Halflings';
content:"\e114";
float: right;
color: inherit;
}
</style>
