Jquery accordion not collapse by default
57,090
Solution 1
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>
Solution 2
<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>
Comments
-
user782104 over 4 years
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>
-
Huntario over 10 yearsAnd change href="#collapseOne"> to href="#collapseTwo">
-
Lucas about 10 yearsI was getting frustrated until your post which made it clear that "in" does not mean "INvisible".
-
Litera about 9 yearsDo you have to have the class="panel panel-default"? I find if I remove that from the div, it stops auto closing. But I don't want the style of it.