Given the code below, how can I add functionality that hides active items when clicking on another? I'd like only one item to be open at a time.
const toggleElements = document.querySelectorAll('.accordion__item');
toggleElements.forEach(el => {
el.addEventListener('click', function() {
this.classList.toggle('is-active');
});
});
Close all others, then open current.
const toggleElements = document.querySelectorAll('.accordion__item');
toggleElements.forEach(el => {
el.addEventListener('click', function() {
toggleElements.forEach(el => el.classList.remove('is-active'));
this.classList.add('is-active');
});
});