$(function(){
$(".panel-body").parent().find(".panel-body, .table").hide(); //最初は非表示
$(".panel-heading").on("click", function() {
$(this).parent().find(".panel-body, .table").slideToggle();
});
});
一旦パネル系はbody部を非表示。
heading部をクリックした場合は、panel内(parent())にあるbody部を(find())全て非表示。
<div class="panel panel-default">
<div class="panel-heading"><strong class="panel-title">タイトル</strong></div>
<div class="panel-body">
<p>従来panel-body部</p>
</div>
<table class="table table-bordered table-hover table-condensed ">
<tr class=""><td>項目1</td><td>内容</td></tr>
<tr class=""><td>項目2</td><td>内容</td></tr>
<tr class=""><td>項目3</td><td>内容</td></tr>
</table>
</div>