javascript - bootstrap tabs inside accordion -
i'm using tabs inside accordion make categories menu. when user click on category gets list of subcategories , when click on subcategory gets list products. managed write jquery i'm getting error in console: uncaught typeerror: cannot read property 'tab' of undefined
<div class="container container-pad"> <div class="col-md-12"> <div class="row"> <div class="col-md-3"> <ul class="list-group category" role="tablist"> <li class="list-group-item"> <a role="button" data-toggle="collapse" href="#collapseone"> categories 1 </a> </li> <ul id="collapseone" class="panel-collapse collapse"> <li class="list-group-item" role="presentation"> <a href="#category1" aria-controls="category1" role="tab" data-toggle="tab">category 1<span class="badge">1</span></a> </li> <li class="list-group-item" role="presentation"> <a href="#category2" aria-controls="category2" role="tab" data-toggle="tab">category 2<span class="badge">2</span></a> </li> </ul> <li class="list-group-item"> <a role="button" data-toggle="collapse" href="#collapsetwo"> categories 2 </a> </li> <ul id="collapsetwo" class="panel-collapse collapse"> <li class="list-group-item" role="presentation"> <a href="#category3" aria-controls="category3" role="tab" data-toggle="tab">category 3<span class="badge">3</span></a> </li> </ul> <li class="list-group-item"> <a role="button" data-toggle="collapse" href="#collapsethree"> categories 3 </a> </li> <ul id="collapsethree" class="panel-collapse collapse"> <li class="list-group-item" role="presentation"> <a href="#category4" aria-controls="category4" role="tab" data-toggle="tab">category 4<span class="badge">4</span></a> </li> <li class="list-group-item" role="presentation"> <a href="#category5" aria-controls="category5" role="tab" data-toggle="tab">category 5<span class="badge">5</span></a> </li> </ul> </ul> </div> <div class="col-md-9"> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="category1"> <ul class="list-group products"> <li class="list-group-item"> product 1 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category2"> <ul class="list-group products"> <li class="list-group-item"> product 2 </li> <li class="list-group-item"> product 3 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category3"> <ul class="list-group products"> <li class="list-group-item"> product 4 </li> <li class="list-group-item"> product 5 </li> <li class="list-group-item"> product 6 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category4"> <ul class="list-group products"> <li class="list-group-item"> product 7 </li> <li class="list-group-item"> product 8 </li> <li class="list-group-item"> product 9 </li> <li class="list-group-item"> product 10 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category5"> <ul class="list-group products"> <li class="list-group-item"> product 11 </li> <li class="list-group-item"> product 12 </li> <li class="list-group-item"> product 13 </li> <li class="list-group-item"> product 14 </li> <li class="list-group-item"> product 15 </li> </ul> </div> </div> </div> </div> </div> </div> <script> $('ul.panel-collapse li').click(function (e) { $('ul li.active').removeclass('active'); e.preventdefault() .tab('show'); $(this).addclass('active'); }); </script>
$('ul.panel-collapse li').click(function (e) { e.preventdefault(); $('ul.panel-collapse li.active').removeclass('active'); $(this).children().tab('show').addclass('active'); }); $('ul.panel-collapse li') gets .list-group-items.
$(this).children().tab('show'); targets bootstrap tag markup in a children of clicked li.
we can chain methods on $(this) long methods chained after don't return new. don't have call $(this) twice $(this).addclass('active');
using $(e.target) peter's solution better though gets element triggered event directly.
Comments
Post a Comment