Bootstrap collapse only showing .collapsed class after first click
I'm not sure if Im setting this wrong, but the default reset / accordion Bootstap is only added.
<a class="collapsed"> </a>
After you pressed any button for the first time, when it shows and does not show how it should be.
I need the page to load with the class already collapsed and then turn on and off just like after you clicked.
Set up fiddle , basically two links should be red at once, but they just turn red after clicking the button.
Definitely odd that it doesn't put the collapsed class on top of it. You can easily get around it with JavaScript.
$('[data-toggle="collapse"]').addClass("collapsed");
This will just add the class to the elements and allow your CSS to apply correctly.
In my case, it was the leftover class = "panel-body" in the panel's body declaration, which made the problem.
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-sm-3" align="left"></div>
<div class="col-sm-6" align="center">3-PHASE CURRENT</div>
<div class="col-sm-3" align="right"><a href="#I-EFF-content"
data-toggle="collapse">Show/Hide</a></div>
</div>
</div>
<div **class="panel-body"** id="I-EFF-content" class="panel-collapse collapse in">
</div>
</div>
By removing this part, he started to work as it should.