I want multiple accordions on the website and that only one is open at a time.
my code looks like this:
HTML:
<button onclick="openDropdown('drop1')" class="w3-button w3-block w3-black w3-left-align">Category 1</button>
<div id="drop1" class="category w3-hide w3-animate-top">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 3</a>
</div>
<button onclick="openDropdown('drop2')" class="w3-button w3-block w3-black w3-left-align">Category 2</button>
<div id="drop2" class="category w3-hide w3-animate-top">
<a href="#" class="w3-button w3-block w3-left-align">Link 4</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 5</a>
<a href="#" class="w3-button w3-block w3-left-align">Link 6</a>
</div>
JS:
function openDropdown(element) {
categories.forEach(category => {
if(category.id !== element && category.className.indexOf("w3-show") !== -1){
category.className= category.className.replace(" w3-show", "")
}
})
let target = document.getElementById(element)
if (target.className.indexOf("w3-show") !== -1) {
target.className = target.className.replace(" w3-show", "")
} else {
target.className += " w3-show"
}
}
categories is a list of all elements with the category class attached.
The problem is that the website is scrolling up if drop1 is open and i try to open drop2.
