Jumping Onload jQuery

Question

Hello.

Basically I have a div at the very top of my site that I want to hide and when you click a button it pushes the whole site down and reveals its contents. Very similar to this nd.edu (click help center or poplar sites on the right side of the header). I am using jquery to accomplish this. This script works but it is jumpy, since the content in the div has to be accessible if JS is turned off, it has to get the height and then hide it. I'm just looking for a way to make the "drawer" not open than shut when the page is loaded, rather it appears that there is nothing there till you click the link (just like nd.edu). Any help would be great.

// Quick Links Slider Effect// Define Vars var $links = $('#quick_links'); var height = $links.height();

// Set the height of #quick_links to 0 $links.hide().css({height: 0});

// When slide is click kick of the function
$(".slide").click(function(){
    // If its visible aniamate to 0
    if($links.is(":visible")){
        $links.animate({height: "0"}, {duration: 300, complete: function(){
            $links.hide();
        }
        });
    }
    // Else animate the height down
    else {
        $links.show().animate({height : height}, {duration: 300});
    }
    return false;
});

Here is my html and css

        #quick_links{background:url(../images/drawer_shadow.jpg) bottom left repeat-x #F6F8F7;width:100%; padding-bottom:20px; position:relative; z-index:1;}
#quick_links ul{float:left !important;margin:0 20px 0 20px;}
#quick_links_button{float:right;background:url(../images/umflint-sprite.png) -430px -132px  no-repeat;height:24px;width:101px;text-indent:-9999px;}
<div id="quick_links">
      <div class="wrapper">
                 <h3>
                    Quicklinks
                </h3>
                <ul>
                    <li>Stuff Goes Here</li>
                </ul>

            </div><!-- End Wrapper -->
          </div><!-- End QuickLinks -->
           <a href="#quick_links" class="slide" id="quick_links_button" name="quick_links_button">Quick Links</a>
         <div id="content">
               blah blah blah
         </div>

Answer 1

You should use $.slideDown() instead of animating to the height. As for hiding it when the document loads:

$(function(){
  $("#quick-links").hide();
});

To hide it:

$("#quick-links").slideDown(300);

And to show it:

$("#quick-links").slideUp(300);

Answer 2

Jonathan's answer is good, but will only hide the div after Jquery is loaded. If that's still not early enough for you, you could do something like this:

<style type="text/css">
#hiddenbox {display:none;}
</style>
<script type="text/javascript">
    // this will write the hidden box for people that have JS enabled
    document.write("<div id='hiddenbox'>stuff goes here</div>");
</script>
<noscript>
    <!-- this will write the visible box for people that have JS disabled -->
    <div id='alternatebox'>stuff goes here</div>
</noscript>

This would insert your hidden box only if the person has JS active, otherwise it would insert a visible box.