bootstrap initially collapsed element

Question

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>

Couldn't quite understand you want the accordions to be collapsed initially? — PSL, Apr 22 '13 at 15:28

score 96 · Accepted Answer · answered Apr 22 '13 at 22:45

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">

score 41 · Answer 2 · edited Jul 11 '17 at 02:29

41

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

edited Jul 11 '17 at 02:29

Rana Depto

721
3
11
31

answered Apr 22 '13 at 22:15

elektrorl

620
5
10

score 12 · Answer 3 · answered Jun 20 '14 at 14:41

12

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>

answered Jun 20 '14 at 14:41

aqm

2,942
23
30

2

This helped me alot. I had a div that should initially be shown and then be hidden using the toggle. However without the data-toggle="false" It first faded the div in (which looked stupid because it was already visible) and then starting from the second toggle it would work as expected. – Marcel Burkhard Sep 02 '14 at 11:42
1

Also solved my problem, thanks. My div (containing a button) was initially collapsed and would strangely show and hide again the first two times anything in the form above it was edited... – danVnest Nov 07 '14 at 06:31
1

Thanks! This solved my problem. I never had the 'in' in the first place, and it was still expanded initially. Adding data-toggle="false" solved it for me. – Anthony Tambrin Oct 01 '15 at 01:17

score 5 · Answer 4 · answered May 25 '19 at 13:26

5

Just add class "show" to the collapsing element's class, bootstrap will use js dynamically to remove it to collapse and show

answered May 25 '19 at 13:26

Tonui

51
1
3

This worked for me in 2019 with Bootstrap 4.x. Maybe a change in how bootstrap classes work over time. Thanks. – Rich G Aug 11 '19 at 03:47

score 1 · Answer 5 · answered Sep 10 '19 at 08:07

1

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">

answered Sep 10 '19 at 08:07

elfTine

299
2
5

score 0 · Answer 6 · answered Nov 12 '18 at 11:22

0

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">

answered Nov 12 '18 at 11:22

Igor Pavlenko

631
1
8
15

score 0 · Answer 7 · answered Dec 31 '19 at 10:39

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>

score 0 · Answer 8 · answered Jun 17 '21 at 13:43

For bootstrap v4+, instead of removing the "in" class, you need to remove the "show" class

<div id="accordion">
 <div class="card">
  <div class="card-header" id="headingOne">
   <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      Collapsible Group Item #1
    </button>
   </h5>
 </div>

 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  </div>
</div>

score -2 · Answer 9 · answered Aug 24 '16 at 04:51

-2

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;">
...

answered Aug 24 '16 at 04:51

Leopoldo Sanczyk

1,529
1
26
28

@VishalKumarSahu Sometimes you can't control the context in which a code is implemented, and sometimes the client just doesn't pay to recode it or debug it. You have to adapt. – Leopoldo Sanczyk Sep 21 '17 at 03:12

bootstrap initially collapsed element

9 Answers9

Linked