liad idan liad idan - 5 months ago 40
jQuery Question

bootstrap tabs inside accordion

I'm using the tabs inside accordion to make a categories menu.
When the user click on a category he gets list of subcategories and when they click on the subcategory they gets list with all the products.
I managed to write the jQuery but I'm getting error in the 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>


JSFiddle

Answer
$('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 your .list-group-items.

$(this).children().tab('show'); targets the bootstrap tag markup in the a children of your clicked li.

We can chain some methods on $(this) as long as those methods chained after it don't return something new. So I don't have to call $(this) twice for $(this).addClass('active');

Using $(e.target) from Peter's solution is better though as it gets the element that triggered the event directly.