title: jQuery slideToggle() not working on div with display:none
body: <p>I'm creating a responsive menu for which I'm using slidetoggle. There is an a element I click to trigger a slideToggle on the .menu element. The html and css for that element look like this:</p>
  
  <pre><code>&lt;nav id="site-navigation" class="main-navigation clearfix" role="navigation"&gt;
              &lt;a href="#" id="responsive-menu" class="visible-xs active"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
  
              &lt;div class="menu"&gt;
                         &lt;ul&gt;
                             &lt;li class="page_item page-item-9"&gt;&lt;a href="http://dev.monkeyapps.nl/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                             &lt;li class="page_item page-item-5"&gt;&lt;a href="http://dev.monkeyapps.nl/features/"&gt;Features&lt;/a&gt;&lt;/li&gt;
                             &lt;li class="page_item page-item-2"&gt;&lt;a href="http://dev.monkeyapps.nl/voorbeeld-pagina/"&gt;Over MonkeyApps&lt;/a&gt;&lt;/li&gt;
                             &lt;li class="page_item page-item-7"&gt;&lt;a href="http://dev.monkeyapps.nl/prijzen/"&gt;Prijzen&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
              &lt;/div&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p>All CSS associated with these elements:</p>
  
  <pre><code>.main-navigation {
      margin: 20px 0;
      padding: 0 25px;    
  }
  
  .main-navigation a#responsive-menu {
      color: #fff;
      font-size: 32px;
      float: right;
  }
  
  .main-navigation a#responsive-menu:hover,
  .main-navigation a#responsive-menu:focus {
      text-decoration: none;
  }
  
  .main-navigation a#responsive-menu i {
      display: none;
  }
  
      .main-navigation a#responsive-menu i:first-child {
          display: inline;
      }
  
      .main-navigation a#responsive-menu.active i:first-child {
          display: none;
      }
  
      .main-navigation a#responsive-menu.active i {
          display: inline;
      }
  
  .menu {
      display: none;
      position: absolute;
      top: 80px;
      left: 0;
      width: 100%;
  }
  
  .main-navigation ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  
      .main-navigation ul li {
          display: block;
          width: 100%;
          height: 45px;
          line-height: 45px;
          text-align: center;
          background: #0091ea;
      }
  
          .main-navigation ul li a {
              display: inline-block;
              font-family: 'Alright_bold';
              font-size: 16px;
              font-weight: normal;
              color: #fff;
              width: 100%;
              height: 45px;
              line-height: 45px;
              text-align: center;
              position: relative;
              padding-bottom: 3px;
          }
  
          .main-navigation ul li a:hover {
              text-decoration: none;
          }
  
          .main-navigation ul li a:before {
              content: '';
              display: block;
              position: absolute;
              left: 0;
              bottom: 0;
              height: 3px;
              width: 0;
              transition: width 0s ease, background .5s ease;
          }
  
          .main-navigation ul li a:after {
              content: '';
              display: block;
              position: absolute;
              right: 0;
              bottom: 0;
              height: 3px;
              width: 0;
              background: #fff;
              transition: width .5s ease;
          }
  
          .main-navigation ul li a:hover:before {
              width: 100%;
              background: #fff;
              transition: width .5s ease;
          }
  
          .main-navigation ul li a:hover:after {
              width: 100%;
              background: transparent;
              transition: all 0s ease;
          }
  </code></pre>
  
  <p>As you see there is one wrapper for the menu and the button that triggers the mobile menu. The bit of jquery which includes slideToggle:</p>
  
  <pre><code>$('#responsive-menu').click(
       function () {
         $(".menu").slideToggle();
         $("#responsive-menu").toggleClass("active");
       }
  );
  </code></pre>
  
  <p>The thing with this is that the slideToggle is in fact triggered and there is stuff happening. Also there are no errors whatsoever. The menu isn't being made visible though and I really can't figure out why, does anyone know how to solve this?</p>
  
  <p>A JSFiddle for the problem:</p>
  
  <p><a href="http://jsfiddle.net/8ph46ecz/" rel="nofollow">JSFiddle</a></p>