Как сделать, чтобы при нажатии на заголовок активной вкладки, вкладка становилась неактивной?

Question

[Кирилл Прогер]

Есть такой код:

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active');
   $(this).addClass('active');
   
   $('.js-tab-content.active').removeClass('active');
   content.addClass('active');
});

<div class="tabs" id="tabfuterblok">
<ul class="tab-header">
  <li class="tab-header__item js-tab-trigger" data-tab="IDELEMENTA">НАЗВАНИЕ 1</li>
   <li class="tab-header__item js-tab-trigger" data-tab="IDELEMENTA1">НАЗВАНИЕ 2</li>
  <li class="tab-header__item js-tab-trigger" data-tab="IDELEMENTA3">НАЗВАНИЕ 3</li>
</ul>

<ul class="tab-content">
      <li class="tab-content__item js-tab-content" data-tab="IDELEMENTA">
            Текст табы
      </li>
      <li class="tab-content__item js-tab-content" data-tab="IDELEMENTA1">
            Текст табы
      </li>
      <li class="tab-content__item js-tab-content" data-tab="IDELEMENTA3">
            Текст табы
      </li>
</ul>   
</div>

Нужно сделать так, чтобы при клике на активный tab он закрывался, а если не активный - открывался (нажатия проводятся на названии tab).

Answer 1

[0xD34F]

.tab-content__item {
  display: none;
}

.tab-content__item.active {
  display: list-item;
}

.tab-header__item.active {
  color: red;
}

const headerSelector = '.tab-header__item';
const contentSelector = '.tab-content__item';
const activeClass = 'active';


// делегирование, обработчик клика добавляется один раз для всех хедеров;
// контент, соответствующий нажатому хедеру, определяем через равенство data-атрибутов
document.addEventListener('click', e => {
  const header = e.target.closest(headerSelector);
  if (header) {
    const { tab } = header.dataset;
    const toggle = n => n.classList[n.dataset.tab === tab ? 'toggle' : 'remove'](activeClass);
    document.querySelectorAll(headerSelector).forEach(toggle);
    document.querySelectorAll(contentSelector).forEach(toggle);
  }
});

// или, обработчик клика добавляется каждому хедеру индивидуально;
// контент, соответствующий нажатому хедеру, определяем по равенству индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);

headers.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(headers, this);
  const toggle = (n, i) => n.classList[i === index ? 'toggle' : 'remove'](activeClass);
  headers.forEach(toggle);
  contents.forEach(toggle);
}

Comments

[Кирилл Прогер]

Спасибо тебе большое!

Answer 2

[Валентин]

Только проверь data-tab в примере у себя, они не совпадают

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger').addClass('active');
   $(this).removeClass('active');
   
   $('.js-tab-content').addClass('active');
   content.removeClass('active');
});