Setting a div to display:none; using javascript or jQuery

Question

I have a really quick question that should be an easy answer.

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.

I am using the following script on a button to toggle show and hide the main menu based on the current page:

<script type="text/javascript">
    (function ($) {
        $("a.BNnavTrigger").click(function (event) {
            event.preventDefault();
            $("div.drill-down-wrapper").slideToggle("9000");
        });
    })(jQuery);     
</script>

In order for the menu to start "closed" on certain pages, I know that I must give the css value of display:none; to the containing div. This is all working fine with one small problem.

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.

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?

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?

Thanks for your time! Alex

UPDATE!

JS fiddle for the issue here: http://jsfiddle.net/fyyG2/17/*

Answer 1

On document ready do $("#yourId").hide();.

For example:

$(document).ready(function () {

     $("div.drill-down-wrapper").hide();
     var $drillDown = $("#drilldown");

        // (what ever your code is)
 });