BootstrapCDNとFont−AwesomeCDNを使って実装します。
Bootstrap3でアイコン付アコーディオン(Collapse)を使用するを参考にさせていただきました。
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bootstrapでアコーディオン</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#collapseOne, #collapseTwo, #collapseThree')
.on('show.bs.collapse', function(){ //< 折り畳み開く処理
$('a[href="#' + $(this).attr('id') + '"]').find('span.glyphicon-collapse-down')
.removeClass('glyphicon-collapse-down').addClass('glyphicon-collapse-up');
})
.on('hide.bs.collapse', function(){ //< 折り畳み閉じる処理
$('a[href="#' + $(this).attr('id') + '"]').find('span.glyphicon-collapse-up')
.removeClass('glyphicon-collapse-up').addClass('glyphicon-collapse-down');
});
});
</script>
</head>
<body>
<div class="container">
<h1>メイン・タイトル</h1>
<p>テキストテキストテキストテキストテキストテキスト</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span>折りたたみグループアイテム折りたたみグループアイテム折りたたみグループアイテム #1</span>
<i class="fa fa-chevron-down"></i>
</a>
</h2>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">１個目の内容
<ul class="list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
<table class="table table-bordered">
<tbody>
<tr>
<th>th</th>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
</tr>
</tbody>
</table>
<h3>タイトルH3</h3>
テキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキスト
<h4>タイトルH4</h4>
テキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキスト
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span>折りたたみグループアイテム #2</span>
<i class="fa fa-chevron-down"></i>
</a>
</h2>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">２個目の内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span>折りたたみグループアイテム #3</span>
<i class="fa fa-chevron-down"></i>
</a>
</h2>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">３個目の内容</div>
</div>
</div>
</div>
</body>
</html>
HTMLはまるっと貼り付ければこれだけで実装が完了します。
