Как сделать закрытие блока при 2м клилке на ссылку которая его показывает?

Question

[Влад ~]

Здравствуйте!
Делая табы столкнулся с проблемой закрытия табов при 2м клике, так как опыта в js мало не знаю как решить
вот html и js код

<div class="tabs__header">
                    <a href="#dropdown1" class="tabs__head">расписание 1</a>
                    <a href="#dropdown2" class="tabs__head">расписание 2</a>
                </div>
                <div class="dropdown" id="dropdown1">
                    блок1
                 </div>
                 <div class="dropdown" id="dropdown2">
                     блок2
                  </div>

const dropdown = document.querySelectorAll('.dropdown');
          triggerParrent = document.querySelector('.tabs__header');

    const hideDrop = () =>{
        dropdown.forEach(item => {
            item.classList.add('dn');
            item.classList.remove('dt');
        })
    }

    hideDrop();

    triggerParrent.addEventListener('click', (e) => {
        const target = e.target;
        if (target && target.classList.contains('tabs__head')) {
            console.log(target);
            const clickedTab = target.getAttribute('href'),
                  dropDownBlock = document.querySelector(clickedTab);
            console.log(dropDownBlock);
            hideDrop();
            dropDownBlock.classList.add('dt');
        }
    });

кто может помогите, пожалуйста, советом или скажите что я делаю не так

Answer 1

[0xD34F]

.dropdown {
  display: none;
}

.dropdown.show {
  display: block;
}

const headerSelector = '.tabs__head';
const contentSelector = '.dropdown';
const activeClass = 'show';


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

// или, назначаем обработчик клика каждому хедеру индивидуально;
// контент, соответствующий нажатому хедеру, определяем по равенству индексов
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);
  contents.forEach((n, i) => n.classList[i === index ? 'toggle' : 'remove'](activeClass));
}

Comments

[Влад ~]

0xD34F можете, пожалуйста написать как называться такая запись ({ target: t }) ибо вижу ее первый раз

[0xD34F]

Влад ~, https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Влад ~]

0xD34F, спасибо