How can I fix this expanding issue?

Question

So I'm trying to create an accordion style menu where if you click a panel it opens the section. If you click it again, it closes. On top of that, it should also close any other panel that was previously opened.

I've almost got that functionality but the problem is that I have to click it twice.

To see what I mean, check out this Fiddle

You'll notice that if you open link one then try to open link 2 , you'll have to press link 2 twice.

How can I make it so that you only have to press it once to close link 1 but also open link 2 ?

 let dropdown = document.querySelectorAll('.dropdown-toggle'); const handleClick = (e) => { const active = document.querySelector('.open'); if(active){ active.classList.remove('open'); } else { e.currentTarget.nextElementSibling.classList.add('open') } } dropdown.forEach(element => { element.addEventListener('click', handleClick); }); 

 body { background: #ccc; } .menu { background: #fff; margin: 0 auto; max-width: 400px; } .menu ul { padding: 0; text-align: center; width: 100%; } .menu ul li { list-style: none; padding: 20px 0; border-bottom: 1px solid #ccc; } .menu ul li a { text-decoration: none; } .menu ul li .dropdown { display: none; padding: 20px; background: grey; } .menu ul li .dropdown.open { display: block; } 

 <div class="menu"> <ul> <li> <a href="#" class="dropdown-toggle">link 1</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 2</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 3</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 4</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 5</a> <div class="dropdown">Some text</div> </li> </ul> </div> 

Answer 1

Can use js like the following.

 let dropdown = document.querySelectorAll('.dropdown-toggle'); const handleClick = (e) => { const isLastOpenTargetClicked = e.currentTarget.nextElementSibling.classList.contains('open'); if(isLastOpenTargetClicked) { e.currentTarget.nextElementSibling.classList.remove('open'); return; } const active = document.querySelector('.open'); if(active){ active.classList.remove('open'); } e.currentTarget.nextElementSibling.classList.add('open') } dropdown.forEach(element => { element.addEventListener('click', handleClick); }); 

 body { background: #ccc; } .menu { background: #fff; margin: 0 auto; max-width: 400px; } .menu ul { padding: 0; text-align: center; width: 100%; } .menu ul li { list-style: none; padding: 20px 0; border-bottom: 1px solid #ccc; } .menu ul li a { text-decoration: none; } .menu ul li .dropdown { display: none; padding: 20px; background: grey; } .menu ul li .dropdown.open { display: block; } 

 <div class="menu"> <ul> <li> <a href="#" class="dropdown-toggle">link 1</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 2</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 3</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 4</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 5</a> <div class="dropdown">Some text</div> </li> </ul> </div> 

Answer 2

There's no need to check whether the current element is active; On the click handler you simply want to check whether the .nextElementSibling 's .classList contains the class open . If it does, remove it. If it doesn't, apply it.

This can be seen in the following:

 let dropdown = document.querySelectorAll('.dropdown-toggle'); const handleClick = (e) => { if (e.currentTarget.nextElementSibling.classList.contains('open')) { e.currentTarget.nextElementSibling.classList.remove('open'); } else { e.currentTarget.nextElementSibling.classList.add('open') } } dropdown.forEach(element => { element.addEventListener('click', handleClick); }); 

 body { background: #ccc; } .menu { background: #fff; margin: 0 auto; max-width: 400px; } .menu ul { padding: 0; text-align: center; width: 100%; } .menu ul li { list-style: none; padding: 20px 0; border-bottom: 1px solid #ccc; } .menu ul li a { text-decoration: none; } .menu ul li .dropdown { display: none; padding: 20px; background: grey; } .menu ul li .dropdown.open { display: block; } 

 <div class="menu"> <ul> <li> <a href="#" class="dropdown-toggle">link 1</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 2</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 3</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 4</a> <div class="dropdown">Some text</div> </li> <li> <a href="#" class="dropdown-toggle">link 5</a> <div class="dropdown">Some text</div> </li> </ul> </div> 

Answer 3

在您的点击处理程序内，循环document.querySelectorAll（'。dropdown-toggle'），从类列表中删除所有打开的内容，然后将open添加到当前目标