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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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');

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>