Bootstrap Accordion - start all closed
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
For Bootstrap 5 you also need to collapse the button else while the body won't show, the heading will still be highlighted and the icon indicating the card is open will still display.
Default is;
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
You need to add collapsed
to the button & tell aria
it's not expanded like this;
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
Heading Text
</button>
Then the body can be dealt with as normal by removing show
from class="accordion-collapse collapse show"
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
Body Text
</div>
</div>
Bootstrap 5:
add class collapsed
to accordion-button
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Accordion Item
</button>
remove class show
from accordion-collapse
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">content...</div>
</div>
Bootstrap 4 and 4+ remove class show
from collapse show
<div class="collapse">
<div class="card-body"></div>
</div>