leitzy

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.