Menu
I am using the bootstrap template and I would like to change the way the accordion works by default.
How can I get the toggle to be closed when page is first seen (upon load)?
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Open!</a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="span6"> <div class="well well-small"> <div class="accordion-toggle"> ...some text... </div> </div> </div> <div class="span2"></div> </div> 
522
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.
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .
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.
When you expand or collapse accordion it just adds/removes a class "in" and sets the height:auto or 0 to the accordion div.
Demo
So in your accordion when you define it just remove "in" class from the div as below. Whenever you expand an accorion it just adds the "in" class to make it visible.
If you render the page with "in" bootstrap looks for the class and it will make the div's height:auto, if it not present it will be at zero height.
<div id="collapseOne" class="accordion-body collapse"> You need to remove "in" from "collapse in"
44
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
