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