Best IT Recipes

Initial Wrapped Boot Element

I am using the bootstrap template and I would like to change the default way of working.

How can I make the switch close when the page is being viewed (when loading)?

<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>
+60
html css twitter-bootstrap toggle
Apr 22 '13 at 14:41
source share
7 answers

When you expand or collapse the accordion, it simply adds / removes the "in" class and sets the height:auto or 0 to the accordion div.

Demo

So, in your accordion, when you define it, simply remove the "in" class from the div, as shown below. Whenever you extend accorion, it simply adds the "in" class to make it visible.

If you render the page using "in", then bootstrap will look for the class, and it will make the height div: auto, if it is not specified, it will be at zero height.

 <div id="collapseOne" class="accordion-body collapse">
+87
Apr 22 '13 at 22:45
source share

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

+35
Apr 22 '13 at 22:15
source share

another solution is to add toggle = false to the collapse target, this will stop it from randomly opening and closing, which will happen if you simply remove the "in"

eg,

 <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" data-toggle="false" > <div class="span6"> <div class="well well-small"> <div class="accordion-toggle"> ...some text... </div> </div> </div> <div class="span2"></div> </div>
+11
Jun 20 '14 at 14:41
source share

Just add the “show” class to the collapsible class, bootstrap will dynamically use js to remove it, to collapse and show

+1
May 25 '19 at 13:26
source share

I just added class hide to the div before the "card-body" and it is hidden by default.

<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">

0
Nov 12 '18 at 11:22
source share

you must remove the show from the class:

 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

It should be

 <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
0
Sep 10 '19 at 8:07
source share

If removing the in class does not work for you, that was my case, you can force the initial state to be collapsed using the CSS display property:

 ... <div id="collapseOne" class="accordion-body collapse" style="display: none;"> ...
-one
Aug 24 '16 at 4:51 on
source share


More articles:


All Articles