How to collapse and expand tab on click in bootstrap?

Question

Bootstrap

Implemented tabs, necessary. to remove the active class from tabs on click.

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

It does not help.
Here is the current code

<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>

After clicking, the active class is added
, it is necessary that when you click again, the class is removed

<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

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