Menu
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>
359
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
bs. collapse', function () { $('#accordion . in'). collapse('hide'); });
If you are using bootstrap accordion and want that one of the accordion should be opened for the first time so add class="in" .
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> 
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
