Bootstrap collapse not working in tabs

Question

When you use bootstrap collapse within tabs, it does not seem to work. On the first tab it works fine, but as soon as you switch to a second tab and attempt to use a second collapse it seems to break. See http://jsfiddle.net/WENyE/2/ for example.

<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> </div> </div> <div class="tab-pane" id="profile"> <div class="accordion" id="accordion3"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> </div> </div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div>

Alkis Kalogeris · Accepted Answer · 2013-08-28 21:41:28Z

Use different id for every collapsible. It's the same page, so when you press the first collapsible it will work. But when you press the second one, it has the same id as the one in the first panel. Which one will it choose to show/hide? Try it with different ids.

Change the second segment (Profiles)

 <div class="tab-pane" id="profile"> <div class="accordion" id="accordion3"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree"> Collapsible Group Item #1 </a> </div> <div id="collapseThree" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseFour"> Collapsible Group Item #2 </a> </div> <div id="collapseFour" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> </div> </div>

Check the collapseThree and collapseFour , changed both in href and as an id attribute.

Collectives™ on Stack Overflow

Bootstrap collapse not working in tabs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related