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

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


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


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.

Tags:

Html

Css

Toggle

Twitter Bootstrap

Recent Posts