title: How to hide a menu that scrolls to content after it's clicked?
body: <p>I have a nice menu in the Codepen below, yet it's not working like the way I want to.</p>
  
  <pre><code>var menu = document.querySelector('.nav__list');
  var burger = document.querySelector('.burger');
  var doc = $(document);
  var l = $('.scrolly');
  var panel = $('.panel');
  var vh = $(window).height();
  
  var openMenu = function() {
    burger.classList.toggle('burger--active');
    menu.classList.toggle('nav__list--active');
  };
  
  // reveal content of first panel by default
  panel.eq(0).find('.panel__content').addClass('panel__content--active');
  
  var scrollFx = function() {
    var ds = doc.scrollTop();
    var of = vh / 4;
  
    // if the panel is in the viewport, reveal the content, if not, hide it.
    for (var i = 0; i &lt; panel.length; i++) {
      if (panel.eq(i).offset().top &lt; ds+of) {
       panel
         .eq(i)
         .find('.panel__content')
         .addClass('panel__content--active');
      } else {
        panel
          .eq(i)
          .find('.panel__content')
          .removeClass('panel__content--active')
      }
    }
  };
  
  var scrolly = function(e) {
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
  
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 300, 'swing', function () {
        window.location.hash = target;
    });
  }
  
  var init = function() {
    burger.addEventListener('click', openMenu, false);
    window.addEventListener('scroll', scrollFx, false);
    window.addEventListener('load', scrollFx, false);
    $('a[href^="#"]').on('click',scrolly);
  };
  
  doc.on('ready', init);
  </code></pre>
  
  <p><strong><a href="http://codepen.io/anon/pen/ygamdE" rel="nofollow noreferrer">http://codepen.io/anon/pen/ygamdE</a></strong></p>
  
  <p>What I want to do, is when I click on a menu item (so when I open the menu and I click one of the list items there), <strong>I want to hide (get to the initial state) the menu automatically after the click.</strong></p>
  
  <p>So when you click, it'll scroll to a certain ID, but the menu keeps being open. I want to close it. Is there any way to do this? I know we have a jQuery hide function, yet I can't get it working.</p>