title: How do I get javascript to toggle a side menu on and off?
body: <p>So I am trying to use the same button to toggle on and off a side menu.  However when I click the button nothing happens to the side menu.  The code looks like it should work but I cannot figure out why it's not.</p>
  
  <p>The menu should change height from 0 to 220px, the links from 0 to 1 opacity and from hidden to visible and the reverse when clocked again.  But the only thing I can get to work is the hamburger animation on click.  Any help?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;link rel="stylesheet" href="style.css"&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;nav&gt;
      &lt;section id="navbar"&gt;
          &lt;!-- Navigation Topper --&gt;
          &lt;div class="container topper-flex"&gt;
              &lt;div class="topper-content"&gt;
                  &lt;i class="fas fa-phone"&gt;&lt;/i&gt;
                  &lt;p class="topper-content"&gt;(354) 994-6746&lt;/p&gt;
                  &lt;i class="fas fa-phone"&gt;&lt;/i&gt;
                  &lt;p class="topper-content"&gt;bobbylarrys@icloud.com&lt;/p&gt;
                  &lt;i class="fas fa-phone"&gt;&lt;/i&gt;
                  &lt;p class="topper-content"&gt;117 Southeast 4th Ave Deerfield Beach, FL 33441&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Mobile Navigation Header --&gt;
          &lt;div class="mobile-nav container"&gt;
              &lt;img id="mobile-logo-1" src="images/maple-logo.png" alt="test" height="50" width="160"&gt; 
  
              &lt;!-- Hamburger Menu --&gt;
              &lt;div class="open-slide container"&gt;
                  &lt;div id="wrapper" onclick="toggleNav()"&gt;
                      &lt;div class="main-item menu "&gt;
                          &lt;span class="line line01"&gt;&lt;/span&gt;
                          &lt;span class="line line02"&gt;&lt;/span&gt;
                          &lt;span class="line line03"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Middle navigation --&gt;
          &lt;div id="brand"&gt;
              &lt;div class="brand-bar container"&gt;
                  &lt;img src="images/maple-logo.png" alt="test" height="50" width="160"&gt;
                  &lt;div class="branding-bar container"&gt;
                      &lt;div class="quote"&gt;
                          &lt;!-- Icon --&gt;
                          &lt;div class="quote-block"&gt;
                              &lt;p&gt;NEED AN ESTIMATE&lt;/p&gt;
                              &lt;p&gt;GET A FREE QUOTE&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="call"&gt;
                          &lt;!-- Icon --&gt;
                          &lt;div class="call-block"&gt;
                              &lt;p&gt;CALL US NOW&lt;/p&gt;
                              &lt;p&gt;(354) 994-6746&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Desktop Navbar --&gt;
          &lt;div class="navbar-menu"&gt;
              &lt;div class="container"&gt;
                  &lt;ul class="navbar-links"&gt;
                      &lt;li&gt;&lt;a class="active" href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="dent.html"&gt;DENT REPAIR&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gallery.html"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  &lt;/nav&gt;
  
  &lt;!-- Side menu --&gt;
  &lt;div id="side-menu" class="side-nav"&gt;
      &lt;ul id="on-top"&gt;
          &lt;li class="nav-item"&gt;&lt;a class="side-active" href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="services.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="jobs.html"&gt;DENT REPAIR&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="about.html"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;body&gt;
      &lt;script type="text/javascript" src="nav.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="test.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>body {
      margin: 0;
      padding: 0;
  }
  
  * {
      font-family: 'Lato', sans-serif;
  }
  
  .container {
      padding: 2em 0;
  }
  
  /* hidden desktop elements */
  
  .topper-flex,
  #brand,
  .navbar-menu {
      display: none;
  }
  
  /*-- -------------------------- --&gt;
  &lt;---         NAVIGATION         --&gt;
  &lt;--- -------------------------- -*/
  
  .navbar {
      height: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
  }
  
  /* logo and hamburger container */
  .mobile-nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0;
      height: 100px;
      background: #000;
      position: relative;
  }
  
  /* Hamburger Menu */
  .open-slide {
      display: inline-block;
      width: auto;
      padding: 0;
      position: absolute;
      right: 2em;
      top: 36px;
  }
  
  #wrapper {
      background: transparent;
      display:inline-block;
      margin:0px;
      position: absolute;
      cursor:pointer;
      right: 0;
  }
  
  .main-item {
      width:30px;
      height:30px;
      position:relative;
  }
  
  .line {
      position: absolute;
      height: 2px;
      width:100%;
      background:white;
      border-radius:1.5px;
      transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  }
  
  .line01 {
      top:19%;
  }
  
  .line02 {
      top:49%;
  }
  
  .line03 {
      top:79%;
  }
  
  .menu.close .line01 {
      transform:rotate(45deg);
      top:49%;
  }
  
  .menu.close .line02, .menu.close .line03 {
      transform:rotate(-45deg);
      top:49%;
  }
  
  /* Hidden Menu */
  #side-menu {
      background: #231F20;
  }
  
  .side-nav {
      visibility: hidden;
      height: 0;
      transition: 0.3s 
  }
  
  .side-active {
      color: #C47625;
  }
  
  ul {
      text-align: center;
      padding: 30px 0;
      margin: 0;
  }
  
  ul a {
      text-decoration: none;
      color: #999;
      line-height: 2em;
      font-weight: 700;
  
      transition: 0.3s ease;
  }
  
  ul li {
      list-style: none;
  }
  
  .menu-center {
      position: absolute;
      top: 9px;
  }
  
  .menu-bottom {
      position: absolute;
      bottom: 0;
  }
  
  </code></pre>
  
  <pre><code>/* jQuery for the navigation animation */
  
  $("#wrapper").click( function() {
      $(".menu").toggleClass("close");
  });
  
  /* Code for the toggling of the navbar */
  
  let toggleNavStatus = false;
  
  let toggleNav = function () {
      let getSidebar = document.querySelector(".side-nav");
      let getSidebarUL = document.querySelector(".side-nav ul");
      let getSidebarLinks = document.querySelectorAll(".side-nav a");
  
      if (toggleNavStatus === false) {
          getSidebarUL.style.visibility = "visible";
          getSidebarLinks.style.opacity = "1";
          getSidebar.style.height = "220px";
  
          toggleNavStatus = true;
      } 
  
      else if (toggleNavStatus === true) {
          getSidebarUL.style.visibility = "hidden";
          getSidebarLinks.style.opacity = "0";
          getSidebar.style.height = "0";
  
          toggleNavStatus = false;
      }
  }
  </code></pre>