Stijn Westerhof Stijn Westerhof - 7 months ago 12
HTML Question

how to collapse one accordion menu item at the start

I made a bootstrap accordion menu with three items. They almost work like the way I want to, but I want to display step one at the beginning like this:enter image description here

Here is my code:

<div class="list-group panel">
<a href="#step1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Stap 1</a>
<div class="collapse" id="step1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a href="#step2" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Stap 2</a>
<div class="collapse" id="step2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a href="#step3" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Stap 2</a>
<div class="collapse" id="step3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>


I tried using the css:
#step1{ display: block; }
but that messes everything up.. I hope someone can help me with this.

Answer

You need to add the class .in to your div like so.

<div class="collapse in" id="step1">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

See the example here - http://getbootstrap.com/javascript/#collapse

Comments