title: Jquery .slideToggle() with CSS media query
body: <p>I have a mobile version of my website that changes according to the width, when the mobile width triggers the media query changes the menu to a drop down. The problem I am having is when a user click on the drop down and then hides it again, when expanding width to full view the menu remains hidden.</p>
  
  <p>Jquery:</p>
  
  <pre><code>$(document).ready(function(){
  $("#drop_button")
      .click(function(){
          $("#menu").stop();
          $("#menu").slideToggle();
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
      width:30%;  
      float:left;
  }
  
  @media (max-device-width: 380px), (max-width: 380px){
      #menu{
          display:none;
          width:calc(100% - 20px);
          height:auto;
          padding:10px;
          font-size:1em;
      }
  }
  </code></pre>
  
  <p>Any help would be appreciated.</p>