我忘記放 button 之類的....過陣子在補
<div class="panel-group" id="accordion666">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel primary</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<script>
function openpanel() {
$('#accordion666.panel-body').slideDown();
$('#accordion666.panel-heading span.clickable').each(function (index, Element) {
var $this = $(this);
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
})
}
function hidepanel() {
$('#accordion666.panel-body').slideUp();
$('#accordion666.panel-heading span.clickable').each(function (index, Element) {
var $this = $(this);
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
})
}
$(document).on('click', '.panel-heading span.clickable', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
</script>
以上文章僅用紀錄資料使用.....