Pure JS accordion menu

Question

Required menu structure implementation:

• Menu
  • submenu
    • contacts
    • news
    • photo
  • submenu
  • submenu
  • submenu
• menu
• menu
• menu

By clicking on the "menu" button, a list of "sub menu" elements opens. Clicking on the "sub menu" button opens a list of menu links. The task is next. By pressing the "menu" button it is necessary to close all other "menu" buttons. By clicking on the "sub menu" button, close all other "sub menu" buttons.

My code:

<https://codepen.io/artemkhmyrov/pen/oNMgGpd>

I only managed to go through the first level of the menu, that is, I click on the "menu" button and the list from the "sub menu" opens, I click on another "menu" button, the previous one closes, but when I click on the "sub menu" everything closes, please help me to do it, I've been struggling with this task for a month and a half

Answer 1

Welcome to StackOverflow.

I suggest you rearrange your html view first.

<ul>
    <li>
      <a>Menu</a>
         <ul>
             <li>
                 <a>Sub Menu</a>
                   <ul>
                      <li>Contacts</li>
                      <li>News</li>
                      <li>Photo</li>
                   </ul>
             </li>
             <li>Sub Menu</li>
             <li>Sub Menu</li>
          </ul>
    </li>
    <li>
       <a>Menu</a>
    </li>
     /*-- and so on --*/
</ul>

From there, you can specify which <li> to expend through JavaScript.

Answer 2

your code is confusing, for multilevel menu you can try like below,

 const header = document.querySelector(".header"); const topBlock = header.querySelector(".header__top"); const burgerMenu = topBlock.querySelector(".burger-menu"); const burgerMenuIcon = burgerMenu.querySelector(".burger-menu__icon"); const burgerMenuBox = burgerMenu.querySelector(".burger-menu__box"); const container = burgerMenuBox.querySelector(".container"); const burgerMenuSub = container.querySelector(".burger-menu-sub"); if (burgerMenuIcon) { burgerMenuIcon.addEventListener("click", function () { burgerMenuIcon.classList.toggle("_active"); burgerMenuBox.classList.toggle("_active"); }); } let burgerMenuTitle = burgerMenuSub.querySelectorAll(".burger-menu-title"); let burgerMenuList = burgerMenuSub.querySelectorAll(".burger--menu-list"); let burgerMenuContent = burgerMenuSub.querySelectorAll(".burger-menu-content"); let burgerIcon = burgerMenuSub.querySelectorAll(".burger-icon"); let burgerMenuContentOpen = burgerMenuSub.querySelectorAll( ".burger-menu-content-open" ); function showMenu() { for (let i = 0; i < burgerMenuTitle.length; i++) { burgerMenuTitle[i].addEventListener("click", (e) => { closeMenu(); burgerMenuContent[i].classList.toggle("burger-menu-content"); }); } } function closeMenu() { for (let i = 0; i < burgerMenuContent.length; i++) { burgerMenuContent[i].classList.remove("burger-menu-content-open"); } } showMenu();

 *, *::before, *::after { box-sizing: border-box; } html { font-size: 0.7144vw; font-style: normal; font-weight: normal; line-height: 1.2; margin: 0; padding: 0; } ul li { margin: 0; padding: 0; list-style: none; }.container { width: 129.4rem; margin: 0 auto; }.header.container { display: flex; }.header__top { background-color: rgb(166, 170, 166); margin-bottom: 1.7rem; }.header__top.container { justify-content: space-between; align-items: center; height: 3.6rem; }.burger-icon { display: flex; width: 2.55rem; align-items: center; height: 2rem; justify-content: center; }.burger-icon.active::after { transition: all 0.9s ease 0s; transform: rotate(-225deg); }.burger-icon.active::before { transition: all 0.9s ease 0s; transform: rotate(225deg); }.burger-icon::after { transform: rotate(90deg); }.burger-icon::before, .burger-icon::after { position: absolute; content: ""; background-color: white; width: 0.2rem; height: 1.1rem; }.burger-menu { width: 3rem; }.burger-menu__icon { z-index: 15; display: block; position: relative; width: 2rem; height: 1.4rem; cursor: pointer; }.burger-menu__icon span, .burger-menu__icon:before, .burger-menu__icon:after { left: 0; position: absolute; height: 15%; width: 100%; transition: all 0.3s ease 0s; background-color: #fff; border-radius: 2rem; }.burger-menu__icon::before, .burger-menu__icon::after { content: ""; }.burger-menu__icon::before { top: 0; }.burger-menu__icon::after { bottom: 0; }.burger-menu__icon span { top: 50%; transform: scale(1) translate(0, -50%); }.burger-menu__icon._active span { transform: scale(0) translate(0, -50%); }.burger-menu__icon._active:before { top: 50%; transform: rotate(-45deg) translate(0, -50%); }.burger-menu__icon._active:after { bottom: 50%; transform: rotate(45deg) translate(0, 50%); }.burger-menu__box { position: absolute; top: -100%; right: 50%; transform: translate(50%, 0); min-height: 31rem; background-color: rgb(180, 180, 180); padding-top: 5rem; transition: all 0.3s ease 0s; z-index: 11; border-radius: 0 0 1.5rem 1.5rem; }.burger-menu__box.container { justify-content: center; color: white; font-size: 5rem; align-items: center; height: 100%; font-weight: bold; }.burger-menu__box._active { top: 0; }.burger-menu-content { margin-left: 2.4rem; display: none; right: 20%; }.burger-menu-content-open { display: block; }.burger-menu-title { padding: 1.1rem 0rem; display: flex; font-weight: 400; font-size: 1.6rem; line-height: 1.9rem; color: #ffffff; }.burger-menu-title:hover { cursor: pointer; }.burger-menu-title:hover >.burger-icon::before, .burger-menu-title:hover >.burger-icon::after { color: #4862b6; }.burger-menu-title:hover a { color: #4862b6; }.burger-menu-sub { width: 100%; display: flex; flex-direction: row; height: 100%; justify-content: space-around; }.burger-menu__section-wrap-link { padding: 0rem 0rem 0.9rem 3rem; line-height: 1.2rem; }.burger-menu__section-link { font-weight: 400; font-size: 1.6rem; color: #ffffff; }.burger-menu__section-link::before { content: ""; position: absolute; border-top: 0.3rem solid transparent; border-left: 0.4rem solid #fff; border-bottom: 0.3rem solid transparent; margin-left: -1rem; margin-top: 1.6rem; }.burger-menu__section-link:hover::before { border-left: 0.4rem solid #4862b6; }.burger-menu__section-links { font-weight: 400; font-size: 1rem; }.burger-menu__sub-sub-link { padding: 0rem 0rem 0.9rem 0rem; font-weight: 400; font-size: 1.6rem; line-height: 1.9rem; color: #ffffff; }.burger-menu__sub-sub-title { pointer-events: none; padding: 0rem 0rem 0.9rem 0rem; font-weight: 400; font-size: 1.6rem; line-height: 1.9rem; color: #ffffff; }.burger-menu__sub-item { width: 25rem; }.burger-menu-list { width: 28.5rem; }.burger-menu__wrap-accordion { padding: 0rem 0rem 2.5rem 2.5rem; overflow-y: scroll; display: flex; max-height: 115rem; width: 100%; flex-direction: row; }.burger-menu__wrap-accordion::-webkit-scrollbar { width: 0.001rem; background: green; }.burger-menu__wrap-item { padding: 1rem 0rem; display: flex; width: 100%; }

 <meta charset="UTF-8"> <meta name="viewport"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <body> <header class="header"> <div class="header__top"> <div class="container"> <div class="burger-menu"> <div class="burger-menu__icon"> <span></span> </div> <div class="burger-menu__box"> <div class="container"> <nav class="burger-menu-sub menu"> <div class="burger-menu__wrap-accordion"> <ul class="burger-menu-list"> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> </ul> <ul class="burger-menu-list"> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> <ul class="burger-menu-list"> <li class="burger-menu__item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> <li class="burger-menu__sub-item"> <li class="burger-menu-title"> <div class="burger-icon"></div> <a href="#" class="burger-menu__sub-sub-link">Sub Menu</a> </li> <ul class="burger-menu-content"> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 1</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 2</a> </li> <li class="burger-menu__section-wrap-link"> <a href="#" class="burger-menu__section-link">Paragraph 3</a> </li> </ul> </li> </ul> </li> </ul> </ul> </div> </nav> </div> </div> </div> </div> </div> </header> </body>

if any query please comment.