Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap initially collapsed element

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> 
like image 522
JoshuaJeanThree Avatar asked Apr 22 '13 14:04

JoshuaJeanThree


People also ask

How do I collapse an element in Bootstrap?

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.

How do I stop a Bootstrap collapse?

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.

What do you mean by Bootstrap collapsing elements?

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 .

How do you keep multiple collapses open in Bootstrap 4?

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.


2 Answers

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"> 
like image 107
PSL Avatar answered Nov 16 '22 00:11

PSL


You need to remove "in" from "collapse in"

like image 44
elektrorl Avatar answered Nov 16 '22 00:11

elektrorl