Добавить и удалить класс js?

Question

[Clay]

Добрый день! У меня в коде есть функция, по клику, которая добавляет класс hide.

const filterBox = document.querySelectorAll('.goods-card');

document.querySelector('nav').addEventListener('click', (event) => {
   if (event.target.tagName !== 'LI') return false;

   let filterClass = event.target.dataset['f'];
   
   filterBox.forEach ( elem => {
      elem.classList.remove('hide');
      if (!elem.classList.contains(filterClass)){
         elem.classList.add('hide');
      }
   });

});

Мне хотелось бы чтобы на второй клик удалялся класс hide. Как это можно реализовать?
Вот пример https://codepen.io/abdelyazy/pen/rNxEGKg (меню слева)
Заранее благодарен!

Answer 1

[RAX7]

p.s. label нельзя вкладывать в ul

Comments

[Clay]

Спасибо! Все помогло)

Answer 2

[Антон Антон]

Как-то так: https://codepen.io/FragsterAt/pen/bGEPaXq

потом тут надо сразу несколько галочек учитывать на самом деле, что еще запутает код, типа такого: https://codepen.io/FragsterAt/pen/bGEPaXq

но вообще лучше перейти на vue :)

Answer 3

[Roman Khegay]

const filterBox = document.querySelectorAll('.goods-card');

document.querySelector('nav').addEventListener('click', (event) => {
   if (event.target.tagName !== 'LI') return false;

   let filterClass = event.target.dataset['f'];
   
   filterBox.forEach ( elem => {
       elem.classList.toggle('hide');
   });

});