title: Menu slider with javascript/jquery
body: <p>I'm trying to make a menu slider for a restaurant with two clickable menus, the lunch menu and the dinner menu. I don't want the menus opening in a new window, just a clean click and the wanted menu opens.    </p>
  
  <p>Here is the code I have so far, I know it needs a lot of work, I'm new to the javascript/jQuery world.  Pure javascript would be cool but anything jQuery would work too. </p>
  
  <p>If someone can help me and please explain what needs to be fixed so i can understand this more I would greatly appreciate it. Thank You.<a href="https://codepen.io/Alfredoeb9/pen/MQRLzG" rel="nofollow noreferrer"> On codepen</a></p>
  
  <pre><code>let lunchContainer = document.querySelectorAll('div.lunchmenu');
          dinnerContainer = document.querySelectorAll('div.dinnermenu');
  
  function reset() {
      for(let i = 0; i &lt; lunchContainer.length; i++) {
          lunchContainer[i].style.display = 'none'; 
          dinnerContainer[i].style.display = 'none'; 
      }
  };
  
  $('.lunch').click(function(event) {
      reset();
      $('.lunchmenu').addClass('active');
      lunchContainer.style.display = 'block';
  });
  
  $('.dinner').click(function() {
      reset();
      $('.lunchmenu').removeClass('active');
  });
  
  $('.dinner').click(function(event) {
      reset();
      $('.dinnermenu').addClass('active');
      // dinnerContainer.style.display = 'block';
  });
  
  $('.lunch').click(function() {
      reset();
      $('.dinnermenu').removeClass('active');
      // dinnerContainer.style.display = 'block';
  });
  
  &lt;div class="page"&gt;
      &lt;div class="header"&gt;
          &lt;div class="logoHeader"&gt;
              &lt;a href="index.html" &gt;
                  &lt;img class="crab" src="http://images.all-free-download.com/images/graphicthumb/vivid_hand_drawn_crab_decoration_pattern_vector_551463.jpg " alt="KingChef Krab logo"&gt;
              &lt;/a&gt;
              &lt;h1 id="titleHeader"&gt;
                  King Chef
              &lt;/h1&gt;
          &lt;/div&gt;
          &lt;nav class="menuHeader"&gt;
              &lt;a class="specMenu" href="about.html"&gt;about&lt;/a&gt;&lt;/li&gt;
              &lt;a class="specMenu" href="team.html"&gt;team&lt;/a&gt;&lt;/li&gt;
              &lt;a class="specMenu" href="menus/dinner.html"&gt;menu&lt;/a&gt;&lt;/li&gt;
              &lt;a class="specMenu" href="#"&gt;news&lt;/a&gt;&lt;/li&gt;
              &lt;a class="specMenu" href="#"&gt;hours&lt;/a&gt;&lt;/li&gt;
              &lt;a class="lastMenu" href="#"&gt;reservations&lt;/a&gt;&lt;/li&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;nav id="menuCategory"&gt;
          &lt;a class="menuStyles lunch" href="#lunch"&gt;lunch&lt;/a&gt;
          &lt;a class="menuStyles dinner" href="#dinner"&gt;dinner&lt;/a&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="lunchmenu"&gt;
              &lt;p&gt;hehehfdsafhkalfj&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="dinnermenu"&gt;
              &lt;p&gt;hdhfsahf&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .lunchmenu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      &amp;.active {
          display: block;
      }
  }
  
  .dinnermenu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      &amp;.active {
          display: block;
      }
  }
  </code></pre>