javascript 允许我折叠扩展的手风琴

Question

I have a side navigation bar that consists of multiple accordions that when expanded shows more navigation buttons. I have a bit of JavaScript that will only allow one of those accordions to be expanded at a time. However if I click on one accordion to expand it, when I click the same accordion it remain open.

I would like to get it so that I can expand and collapse the accordion without having to expand another accordion.

JavaScript:

var acc = document.getElementsByClassName("nav-link-bottom-main");
var i;
var last;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        if (last) {
            last.nextElementSibling.classList.toggle("show");
        }
        this.nextElementSibling.classList.toggle("show");
        last = this;
    }
}

html:

<div>
    <button class="nav-link-bottom-main toggle"><a href="#">Endpoint Section 1</a></button>
    <div class="panel">
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 1.1</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 1.2</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 1.3</a></button>
    </div>

    <button class="nav-link-bottom-main toggle"><a href="#">Endpoint Section 2</a></button>
    <div class="panel">
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.1</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.2</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.3</a></button>
        <button class="nav-link-bottom-sub toggle"><a class="GET-icon"><center>GET</center></a><a href="#">endpoint 2.4</a></button>
    </div>

Answer 1

It looks like whenever if (last) condition is true and it's the same element as this , you're toggling show class twice on same element, so probably this is why it remains open (actually it closes and opens again at the same time).

So try to check if you're not toggling same element like this:

if (last && last != this) {
    last.nextElementSibling.classList.toggle("show");
}
this.nextElementSibling.classList.toggle("show");

And I hope it helps.