title: Setting a div to display:none; using javascript or jQuery
body: <p>I have a really quick question that should be an easy answer.</p>
  
  <p>I have a mobile navigation menu that uses jQuery to "drill down" menu levels. Each time a level is loaded, the jQuery determines the menu's height, and sets it accordingly.</p>
  
  <p>I am using the following script on a button to toggle show and hide the main menu based on the current page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      (function ($) {
          $("a.BNnavTrigger").click(function (event) {
              event.preventDefault();
              $("div.drill-down-wrapper").slideToggle("9000");
          });
      })(jQuery);     
  &lt;/script&gt;
  </code></pre>
  
  <p>In order for the menu to start "closed" on certain pages, I know that I must give the css value of <code>display:none;</code> to the containing div. This is all working fine with one small problem.</p>
  
  <p>When I initially hide the menu, the jQuery drilldown menu plugin detects that it is hidden, and sets the menu height to 0px. When I toggle the menu on a page that had the menu initially hidden, all the other content in the pane toggles correctly, but the menu itself is stuck at a 0 height.</p>
  
  <p>In my brain, the obvious answer to this problem would be to hide the containing menu div ,via javascript, after the menu has been loaded and it's height set. Does this sound correct?</p>
  
  <p>Could anyone provide me with a little script to do this? I am a complete and utter noob with js. Does anyone else have a different recommendation as to how to handle this issue?</p>
  
  <p>Thanks for your time!
  Alex</p>
  
  <p><strong>UPDATE!</strong></p>
  
  <p><strong>JS fiddle for the issue here:</strong> <a href="http://jsfiddle.net/fyyG2/17/" rel="noreferrer">http://jsfiddle.net/fyyG2/17/</a>*</p>