Bootstrap data-toggle collapses div after second click, not first

html css twitter-bootstrap toggle

15,738

Solution 1

Just add class 'collaspe in' to class="accordion-body".

Check example code at CODEPEN

HTML:

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

I hope this will fix your issue. Enjoy :)

Solution 2

You should only call bootstrap.min.js one. Make sure that you're calling bootstrap files only once in the <head> section. If you're using Bootstrap with Laravel or any kind of framework, keep in mind that npm run dev compiles bootstrap js files in app.js. That could be the case.

Solution 3

<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>

<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>

This will make it collapsible, but show the panel by default. When you click the Collapse button, it will collapse the panel on the first click.

I'm only adding this here for if anyone is looking to do it either way. I found this link when searching for its inverse. Hope it helps!

Solution 4

I had this problem, and in my case I had foolishly inserted two "class" attributes in the div I wanted to collapse like so:

<div class="something" id="mydiv" class="collapse in"> <div>

The browser seems to eliminate the second class attribute instead of merging them.

My problem was fixed by "merging" together the two class attributes:

<div id="mydiv" class="something collapse in"> <div>

Solution 5

<div id="collapseOne" class="accordion-body collapse">

This will also make it close by default and open when clicked

View more solutions

15,738

Author by

Pupkin

Updated on June 19, 2022

Comments

Pupkin about 2 years

I have the simple example with Bootstrap and toggling divs by click. Here is markup:

<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">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

When user clixks link with title 'Open!' underlying div expands or collapses. Div is expanded initially and when user clicks first time it has no effect. Then if user clicks second time, div collapses.

In the original example div is collapsed initially but I would like it to be opened. How could I fix the problem?

Ixalmida over 2 years

Just adding "show" to the collapsible element classes worked for me. I guess it initializes the state of the element so that it doesn't have to initialize on the first event.