Clever Geek Handbook

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.

+3


source to share


2 answers


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.

+2


source


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.

+1


source






More articles:


All Articles