Menu
So I have a bootstrap style accordion on my page - but on start, the first panel is open. How can i make it so that when you load the page, they are all closed?
Any help would be really appreciated! Thanks so much!
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-minus text-primary"></i> Overview</a> </h4> </div> <div id="panel1" class="panel-collapse collapse in"> <div class="panel-body">Contents panel 1</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a> </h4> </div> <div id="panel2" class="panel-collapse collapse"> <div class="panel-body">Contents panel 2</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a> </h4> </div> <div id="panel3" class="panel-collapse collapse"> <div class="panel-body">Contents panel 3</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a> </h4> </div> <div id="panel4" class="panel-collapse collapse"> <div class="panel-body">Contents panel 3</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a> </h4> </div> <div id="panel5" class="panel-collapse collapse"> <div class="panel-body">Contents panel 3</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a> </h4> </div> <div id="panel6" class="panel-collapse collapse"> <div class="panel-body">Contents panel 3</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a> </h4> </div> <div id="panel7" class="panel-collapse collapse"> <div class="panel-body">Contents panel 3</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a> </h4> </div> <div id="panel8" class="panel-collapse collapse"> <div class="panel-body">Contents panel 3</div> </div> </div> </div> 
659
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
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});
open accordian > at right side go to accordian seting > scrol down to Expand/Collapse Accordion Option On Page Load > choose Hide/close All Accordion.. thanks.
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class. This subscribes the collapse to events on #accordionExample , which is the main accordion element, via the data-parent attribute.
Boostrap 3
Just remove .in from panel1.
<div id="panel1" class="panel-collapse collapse"> <div class="panel-body">Contents panel 1</div> </div> Bootstrap 4
See @Syed Sajid's answer
185
Bootstrap 4 and 4+ remove class show from collapse show
<div class="collapse"> <div class="card-body"></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
