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>
This question is related to
html
css
twitter-bootstrap
toggle
need to delete show from class:
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
It have to be
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
Just add class "show" to the collapsing element's class, bootstrap will use js dynamically to remove it to collapse and show
I just added class hide to the div before "card-body" and it hidden by default.
<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">
another solution is to add toggle=false to the collapse target, this will stop it randomly opening and closing which happens if you just 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>
There is a class in accordian which just adjust height from height:auto or 0 to the accordian div.
if you remove 'in' class and when you click on it, bootstrap adds 'in' class again and now content will be visible
<div id="collapseOne" class="accordion-body collapse">
....
</div>
You need to remove "in" from "collapse in"
If removing the in
class doesn't work for you, such was my case, you can force the collapsed initial state using the CSS display property:
...
<div id="collapseOne" class="accordion-body collapse" style="display: none;">
...
Source: Stackoverflow.com