Jquery accordion not collapse by default
accordion, javascript, jquery, jquery-ui, twitter-bootstrap
Solution
For Bootstrap 3, some things have changed. The following code accomplishes your desired functionality in Bootstrap 3
If you want the panel body to show by default:
<div id="collapseOne" class="panel-collapse collapse in">
If you want the panel body to hide by default:
<div id="collapseOne" class="panel-collapse collapse">
Here is an example:
<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>
Problem
I am using collapse plugin provided by bootstrap which is a jquery simple plugin However it collapse by default, how to modify so that the collapse item is hidden by default, only when i press the header, then the item collapse and show? Thank you The document of the plugin, just few line so it only takes one minute ``` $(document).ready( function () { $(".collapse").collapse()({ toggle: false, show: false }); } ); ``` This is the 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> ```