Джокерський акордеон не згортає за замовчуванням - javascript, jquery, jquery-ui, twitter-bootstrap, accordion

Я використовую плагін згортання, наданий bootstrap який є простим плагіном jquery

Однак він згортається за замовчуванням, як змінити так, щоб елемент згортання був прихований за замовчуванням, лише коли я натискаю заголовок, потім елемент згортається і показує? Дякую

Документ плагіна, лише кілька рядків, тому він займає лише одну хвилину

$(document).ready( function () {
$(".collapse").collapse()({
toggle: false,
show: false
});
} );

Це html:

<div class="accordion-group">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>

Відповіді:

У Bootstrap 3 деякі речі змінилися. Наступний код виконує потрібну функціональність у Bootstrap 3

Якщо ви хочете, щоб тіло панелі відображалося за замовчуванням:

<div id="collapseOne" class="panel-collapse collapse in">

Якщо ви хочете, щоб тіло панелі приховано за замовчуванням:

<div id="collapseOne" class="panel-collapse collapse">

Ось приклад:

<div class="bs-example">
<div class="panel-group" id="accordion">

<!- Repeat For Next Panel------->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
</div>
</div>
</div>
<!- Repeat For Next Panel---(but change <div id="collapseTwo")--->

</div>
</div>

<div class="accordion-group collapse">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>
</div>