Как свернуть и развернуть tab по клику в bootstrap?

Question

[tehfoxen]

Реализованы вкладки, необходимо. чтобыпо клику убирался класс active у табов.

$('ul.nav.nav-tabs li').on('click', function(){
$('.nav-tabs li.active').removeClass('active');
$('.tab-pane.active').removeClass('active');
});

Это не помогает.
Вот текущий код

<ul class="nav nav-tabs">
  <li class=""><a href="#tab1" data-toggle="tab">Заголовок 1</a></li>
  <li class=""><a href="#tab2" data-toggle="tab">Заголовок 2</a></li>
  <li class=""><a href="#tab3" data-toggle="tab">Заголовок 3</a></li>
  <li class=""><a href="#tab4" data-toggle="tab">Заголовок 4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="tab1">...</div>
  <div class="tab-pane" id="tab2">...</div>
  <div class="tab-pane" id="tab3">...</div>
  <div class="tab-pane" id="tab4">...</div>
</div>
</div>

После клика добавляется класс active
необходимо , чтобы при повторном клике класс удалился

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Заголовок 1</a></li>
  <li class=""><a href="#tab2" data-toggle="tab">Заголовок 2</a></li>
  <li class=""><a href="#tab3" data-toggle="tab">Заголовок 3</a></li>
  <li class=""><a href="#tab4" data-toggle="tab">Заголовок 4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="tab1">...</div>
  <div class="tab-pane" id="tab2">...</div>
  <div class="tab-pane" id="tab3">...</div>
  <div class="tab-pane" id="tab4">...</div>
</div>
</div>

Answer 1

[tehfoxen]

Решено

$(document).ready(function(){
$(".nav.nav-tabs > li").click(function(){
$(".tab-content").collapse('toggle');
});
});