Accordian style mobile menu (HTML/CSS/JS)

I’m trying to make a navigation menu using an accordian style dropdown. I’ve been following some guides online, but I just can’t seem to get the JavaScript right. I’ve managed to get the button to change color when clicked, but I can’t get the menu to expand.

Here’s the code I have currently.

HTML:

<nav>
     <div id="header">
          <button class="mobileMenu">&#9776;</button>
          <div class="logo">
               <img src="files/logos/long_white_text.png" alt="Frameworks Videography Logo">
          </div>
     </div>
     <ul class="nav-links">
          **Truncated for simplicity
     </ul>
     <ul class="mmNavLinks">
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html">Contact</a></li>
          <hr size="5">
          <li><span class="underline">For Clients</span>
          <ul class="sublist">
               <li><a href="forms.html">Forms</a></li>
               <li><a href="https://portal.frameworksvideography.com">Payment Portal</a></li>
               <li><a href="https://support.frameworksvideography.com/myportal">Support Portal</a></li>
          </ul>
          </li>
          <li><span class="underline">For Viewers</span>
               <ul class="sublist">
               <li><a href="https://live.frameworks.video/">Livestreams (TicketLeap)</a></li>
               <li><a href="https://youtube.frameworks.video/">YouTube</a></li>
               <li><a href="https://support.frameworksvideography.com/myportal">Support Portal</a></li>
          </ul>
          </li>
     </ul>
</nav>

CSS:

.mobileMenu {
    font-size: 30px;
    display: none;
    border: none;
    border-radius: 5px; /* Add border radius to buttons */
    padding: 0px 5px 3px;
    background-color: #bd2a2e;
    transition: 0.3s;
    color: white;
    cursor: pointer;
    outline: none;
}

@media (min-width: 1191px) {
    .mmNavLinks{ 
        display: none;
    }
}

@media (max-width: 1190px) {
    .mobileMenu {
        display: block;
    }
    
    .mmNavLinks {
        font-weight: bold;
        font-size: 20px;
        margin: 0 30%;
        overflow: hidden;
        max-height: 0;
    }

    .logo {
        margin: 0 auto;
    }
    
    .nav-links {
        display: none;
    }
    
    nav {
        display:inline;
        text-align: center;
    }
    
    nav ul {
        display: block;
        
    }
    
    nav ul li {
        margin: 30px 0px;
    }
    
    #header {
        display: flex;
    }
    
    hr {
        background-color: white;
        
    }
    
     .underline {
        text-decoration: underline;
    }
    
    .sublist {
        font-weight: normal;
        font-size: 15px;
    }
    
    .active, .mobileMenu:hover{
        background-color: white;
        color: black;
    }
}

JavaScript:

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

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

The current code is also deployed at https://testbed.frameworksvideography.com. You need to shrink the width of your window to see the button.

Thank you in advance for your assistance!