带多个孩子的手风琴菜单（面板）

Question

I'm very new to coding. I'm trying to create an accordion menu with multiple 'drop down' children panels. I've followed for the most part this 'how to' from w3schools - https://www.w3schools.com/howto/howto_js_accordion.asp

The issue I'm having is this uses 'nextElementSibling' when I want to show all the siblings/children of the top menu item.

Is there some way to easily 'get' all the element siblings?

Here's the codepen I'm working on - https://codepen.io/kbeats/pen/RYzzdW

My html for the menu is -

<ul id="moduleOneList">
    <li class="tile" id="moduleOneTitle"> Module One
        <li class=subTile id="oneSlideOne"> Title Slide</li> 
        <li class=subTile id="oneSlideTwo"> References </li>
    </li>
</ul>
<ul id="moduleTwolist">
    <li class=tile id="moduleTwoTitle"> Module Two
        <li class=subTile id="twoSlideOne"> Title Slide </li>
        <li class=subTile id="twoSlideTwo"> References </li> 
        <li class=subTile id="twoSlideThree"> Third Slide </li>
    </li>

My CSS

    ul {
    list-style:none;
}



li {
    position: relative;
    left: -40px;
    text-decoration: none;
    display: block;
}


.tile {
    background-color: #74A3EB;
    height: 60px;
    width: 220px;
    border-radius: 10px;
    color: white;
    font-family: lato;
    font-weight: 700;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    margin: 10px 2px 2px 10px;
    transition: 0.4s ease-in-out;
}

.active, .tile:hover {
    background-color: #3C72F0; /* change this color */
}

.subTile {
    display: none;
    background-color:#4337DD;
    width: 220px;
    height: 40px;
    border-radius: 10px;
    display: none;
    overflow: hidden;
    color: white;
    font-family: lato;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    margin: 6px 10px 0px 10px; 
    cursor: default;
    transition: background-color 0.5s ease-in-out;
}



.subTile:hover {
    background-color: #605DE8;
}

And my javascript concerning the accordion menu

    var acc = document.getElementsByClassName("tile");
var i;

for (i=0;i<acc.length;i++) {
    acc[i].addEventListener("click", function(){
        if(this.classList != "active") {
            this.classList.toggle("active");
        } else {
            this.removeClass("active");
        }


        var panel = $('.tile').nextAll();
        if(panel.style.display == "block"){
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }

    });
}

I've tried using

 $('.tile').nextAll(); 

to target all the children, but that doesn't seem to be working.

Answer 1

Here's a working codepen .

1) You're binding the click event to .tile , the .subTile are .tile 's child nodes not siblings.

2) this.classList != "active" would always return true because the classList is title or title active .

And it's no need to check before toggle class, so simply use this.classList.toggle("active");

3) var panel = $('.tile').nextAll();

panel here is a jQuery object but not a DOM element, you can't change style by using panel.style.display = "..."; .

Since you're using jQuery here, it can be done by using show() or hide() like the following.

// this here is the element that just being clicked,
// $("ul,li", this) equals $(this).find("ul,li")
var $panel = $("ul,li", this); // add a $ sign to remind it's a jQuery object
this.classList.contains("active") ? $panel.show() : $panel.hide();

Note that you might need to comment out .tile 's height: 60px; in the CSS.