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

В Bootstrap есть компонент "Tab", который позволяет создавать вкладки на веб-странице. Когда пользователь кликает на вкладку, она становится активной и показывает свое содержимое, в то время как остальные вкладки остаются скрытыми.

Для того чтобы свернуть и развернуть tab по клику, мы можем использовать JavaScript и jQuery. Вот пример кода, который демонстрирует эту функциональность:

HTML:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade show active">
    <h3>Tab 1 Content</h3>
    <p>This is the content of Tab 1.</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>Tab 2 Content</h3>
    <p>This is the content of Tab 2.</p>
  </div>
  <div id="tab3" class="tab-pane fade">
    <h3>Tab 3 Content</h3>
    <p>This is the content of Tab 3.</p>
  </div>
</div>

JavaScript/jQuery:

$(document).ready(function(){
  $('.nav-link').click(function(){
    $('.tab-pane').removeClass('show active');
    $($(this).attr('href')).addClass('show active');
  });
});

В этом примере мы используем событие "click" для элементов с классом "nav-link", которые являются ссылками на вкладки. При клике на ссылку, мы сначала удаляем классы "show" и "active" из всех элементов с классом "tab-pane", а затем добавляем эти классы к нужному элементу с использованием метода jQuery "attr()". Таким образом, выбранный таб становится видимым и активным, а остальные скрываются.

Используя этот код, вы сможете свернуть и развернуть табы по клику в Bootstrap.