title: How to toggle an element from clicking a different element in JavaScript?
body: <p>So I'm super new to JavaScript and web development in general but I'm trying to find a way to toggle an element by clicking on another element. </p>
  
  <p>To clarify, this is for the mobile version of my site. This is what it looks like now: 
  <a href="https://i.stack.imgur.com/F3lVo.png" rel="nofollow noreferrer">https://i.stack.imgur.com/F3lVo.png</a></p>
  
  <p>What I'm trying to do is have the little hamburger menu in the bottom left corner be clicked to reveal my navigation bar which would slide in from the right.</p>
  
  <p>If it makes the solution any different I am also using media queries to hide the navigation bar once the webpage becomes a certain width.</p>
  
  <p>Here's what the JavaScript looks like for the hamburger menu so far: </p>
  
  <pre><code>&lt;script&gt;
      $( document ).ready(function() {
          var hamburger = $('#hamburger-icon');
          hamburger.click(function() {
          hamburger.toggleClass('active');
          return false;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's the CSS it activates: </p>
  
  <pre><code>#hamburger-icon.active .line-1 {
  transform: translateY(10px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
  -moz-transform: translateY(10px) translateX(0) rotate(45deg);
  }
  
  #hamburger-icon.active .line-2 {
  opacity: 0;
  }
  
  #hamburger-icon.active .line-3 {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
  }
  </code></pre>
  
  <p>This animates the hamburger menu to become and X when clicked, but is there any way I can also have it trigger my navigation bar to become visible? Any help would be appreciated, thanks!</p>