Is there something wrong with my code for my accordion menu?

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>