javascript - Bootstrap accordion collapse - one tab working, one not -
i have twitter bootstrap accordion layout 2 adjacent panes. events in dayone animate fine, in daytwo not. javascript console registers collapsing action in both panes, daytwo events don't slide.
i suspect it's simple i'm @ loss. thank assistance!
<section class="nav-tabs-default hidden-xs"> <!-- parent nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#dayone" data-toggle="tab"> <div class="title">day 1</div> <div class="subtitle">06/10/2015</div> </a></li> <li><a href="#daytwo" data-toggle="tab"> <div class="title">day 2</div> <div class="subtitle">06/11/2015</div> </a></li> </ul> <!-- parent tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="dayone"> <!-- child 1 tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="dayone-1"> <div class="panel-group timeline-schedule" id="paneltimelineone"> <div class="panel panel-default"> <div class="speaker-wrapper"> <img src="assets/img/speaker/speaker-1.jpg" class="img-responsive img-circle" alt="speaker-1" /> </div> <div class="panel-heading"> <div class="panel-title"> <div class="time"><i class="fa fa-clock-o"></i> 2:00 pm</div> <a data-toggle="collapse" data-parent="#paneltimelineone" href="#itemone"> title event 1 <div class="pull-right fa fa-angle-up"></div> <div class="pull-right fa fa-angle-down"></div> </a> </div> </div> <div id="itemone" class="panel-collapse collapse in"> <div class="panel-body"> <article> <p>info event 1</p> </article> </div> </div> </div> <div class="panel panel-default"> <div class="speaker-wrapper"> <img src="assets/img/speaker/speaker-2.jpg" class="img-responsive img-circle" alt="speaker-2" /> </div> <div class="panel-heading"> <div class="panel-title"> <div class="time"><i class="fa fa-clock-o"></i> 5:40 pm</div> <a data-toggle="collapse" data-parent="#paneltimelineone" href="#itemtwo" class="collapsed"> title event 2 <div class="pull-right fa fa-angle-up"></div> <div class="pull-right fa fa-angle-down"></div> </a> </div> </div> <div id="itemtwo" class="panel-collapse collapse"> <div class="panel-body"> <article> <p>info event 2</p> </article> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> <div class="tab-pane fade" id="daytwo"> <!-- child 2 tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="daytwo-1"> <div class="panel-group timeline-schedule" id="paneltimelineone"> <div class="panel panel-default"> <div class="speaker-wrapper"> <img src="assets/img/speaker/speaker-1.jpg" class="img-responsive img-circle" alt="speaker-1" /> </div> <div class="panel-heading"> <div class="panel-title"> <div class="time"><i class="fa fa-clock-o"></i> 11:00 am</div> <a data-toggle="collapse" data-parent="#paneltimelineone" href="#itemone"> title event 3 <div class="pull-right fa fa-angle-up"></div> <div class="pull-right fa fa-angle-down"></div> </a> </div> </div> <div id="itemone" class="panel-collapse collapse in"> <div class="panel-body"> <article> <p>info event 3</p> </article> </div> </div> </div> <div class="panel panel-default"> <div class="speaker-wrapper"> <img src="assets/img/speaker/speaker-2.jpg" class="img-responsive img-circle" alt="speaker-2" /> </div> <div class="panel-heading"> <div class="panel-title"> <div class="time"><i class="fa fa-clock-o"></i> 3:00 pm</div> <a data-toggle="collapse" data-parent="#paneltimelineone" href="#itemtwo" class="collapsed"> title event 4 <div class="pull-right fa fa-angle-up"></div> <div class="pull-right fa fa-angle-down"></div> </a> </div> </div> <div id="itemtwo" class="panel-collapse collapse"> <div class="panel-body"> <article> <p>info event 4</p> </article> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> </section>
it because have same id's , data-parents collapsible items in tab 2 in tab one. these must unique. example-- href="#itemone"
on toggle first item in both tab 1 , two.
see this bootply code fixed
Comments
Post a Comment