How to check if an element has a class using javascript

Question

I'm attempting to use javascript to determine whether an element has a class and then remove it, but I can't seem to get it to work.

the class name show has the property display: block;

 var drop = document.getElementsByClassName('dropdown'); var link = document.getElementsByClassName('faculties') var i for (let i = 0; i < link.length; i++) { link[i].addEventListener('click', () => { var present = drop.classList.contains('show'); if (present == true) { // drop.classList.remove('show') alert('hi') drop[i].classList.toggle("show"); }); }

 <div class="right programmes"> <div class="widget"> <h1>Our Programmes and Courses</h1> </div> <div class="widget"> <div class="faculties"> <a>Faculty of Physical Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown"> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Biological Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown"> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Health Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown"> <h1>Faculty Stuff</h1> </div> </div> </div> </div>

Answer 1

You are trying to work off a HTML Collection and it does not work that way. You need to either loop over the collection or find the element with the class.

Loop

for (var j=0; j < drop.length; j++) {
  if(j!==i) drop[j].classList.remove("show");
}
drop[i].classList.toggle('show');

Select

// Select the element with a new selector
const active = document.querySelector(".programmes .dropdown.show");
// Make sure it is not the current thing you clicked on
if (active && active !== drop[i]) {
  active.classList.remove('show');
}
drop[i].classList.toggle('show');

Answer 2

Use hidden here (and add that as a boolean attribute on your HTML to reflect initial state):

 const faculties = document.querySelectorAll('.faculties'); const dropdowns = document.querySelectorAll('.dropdown'); for (const faculty of faculties) { faculty.addEventListener('click', e => { for (const dropdown of dropdowns) { dropdown.hidden = ![...faculty.children].includes(dropdown); } }) }

 <div class="right programmes"> <div class="widget"> <h1>Our Programmes and Courses</h1> </div> <div class="widget"> <div class="faculties"> <a>Faculty of Physical Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown" hidden> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Biological Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown" hidden> <h1>Faculty Stuff</h1> </div> </div> <div class="faculties"> <a>Faculty of Health Sciences <i class="fas fa-chevron-down"></i></a> <div class="dropdown" hidden> <h1>Faculty Stuff</h1> </div> </div> </div> </div>