DEV Community

Md Abdullah al noor
Md Abdullah al noor

Posted on

1

Answer: how toggle class vanilla js in complex situation

 document.querySelectorAll(".abstract-tab__content-view").forEach(function(item){
    item.addEventListener("click",function(e){
      e.preventDefault();
      if(e.target.parentElement.classList.contains('abstract-tab__content-view')){
       let dataKey = 0;
        dataKey = +e.target.parentElement.parentElement.nextElementSibling.getAttribute('data-key');
        abstractTabContentHide(dataKey)
        e.target.parentElement.parentElement.nextElementSibling.classList.toggle('display-none');
        return false;
      }else{
        e.preventDefault();
      }
    })
  })
  function abstractTabContentHide(key){
     
    document.querySelectorAll(".abstract-tab__content").forEach(function(item){
      // console.log(item.getAttribute('data-key'))
      let currentKey = +item.getAttribute('data-key');
      if(currentKey != key){
        if(!item.classList.contains('display-none')){
          item.classList.add('display-none');
           return false;
        }
        return false;
      }
      return false;
    }) ; 
    return false;
  }

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay