我的手风琴菜单代码有问题吗？

Question

I'm trying to make a sliding accordion menu, but when I click the buttons that are meant to trigger it, nothing happens at all.

Here's my code...

Also, if my code is just generally sloppy I apologize, I'm pretty new to this and am super open to suggestions for better practices!

Thanks in advance.

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { // this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .nav { padding: 18px; grid-column: 1/2; grid-row: 1/2; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; font-size: 20px; color: black; text-decoration: none; }.nav a { transition: 0.4s; }.nav a:hover { color: #FFB52A; font-style: italic; padding: 10px; transition: 0.2s; } button { background: none;important: border; none: padding; 0:important; text-decoration: none; cursor. pointer: },accordion { font-family, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco; "Courier New": "monospace"; font-size: 20px; cursor: pointer; padding: 18px. transition; 0.4s, }.active: :accordion;hover { color: #FFB52A; font-style: italic; padding: 10px. transition; 0.2s: };panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden. transition; max-height 0.2s ease-out; }

 <div class="nav"> <h1>header</h1> <button class="accordion">music</button><br> <div class="panel"> <a href="artists.html">artists</a><br> <a href="draw-and-listen.html">draw and listen</a><br> </div> <hr><br> <button class="accordion">visual</button><br> <div class="panel"> <a href="work.html">work</a><br> </div> <hr><br> <a href="store.html">store</a><br> <a href="about.html">about</a> </div>

Answer 1

In your code, you are looking for the element after the button to show/hide, but that's a <br> not the <div> with the content.
In the example below I simply removed the <br>

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { // this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }

 .nav { padding: 18px; grid-column: 1/2; grid-row: 1/2; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; font-size: 20px; color: black; text-decoration: none; }.nav a { transition: 0.4s; }.nav a:hover { color: #FFB52A; font-style: italic; padding: 10px; transition: 0.2s; } button { background: none;important: border; none: padding; 0:important; text-decoration: none; cursor. pointer: },accordion { font-family, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco; "Courier New": "monospace"; font-size: 20px; cursor: pointer; padding: 18px. transition; 0.4s, }.active: :accordion;hover { color: #FFB52A; font-style: italic; padding: 10px. transition; 0.2s: };panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden. transition; max-height 0.2s ease-out; }

 <div class="nav"> <h1>header</h1> <button class="accordion">music</button> <div class="panel"> <a href="artists.html">artists</a><br> <a href="draw-and-listen.html">draw and listen</a><br> </div> <hr><br> <button class="accordion">visual</button> <div class="panel"> <a href="work.html">work</a><br> </div> <hr><br> <a href="store.html">store</a><br> <a href="about.html">about</a> </div>