Q:

JQuery Toggle Button

I'm new to JQuery, so please bear with me =)
I have a "Menu" button that should "slide down" a menu.
My problem is that the menu is visible from the start, I want it to be hidden at first and then when clicking on the "Menu" button, should the menu "slide down" and then "slide up" again after pressing the "Menu" button again.
My HTML:
<div id="moduleMenuBtn" class="moduleMenuBtn">Menu</div>
<div id="effect">Some Content</div>

My JS code:
<script type="text/javascript">

    $(function() {
        function runEffect(){ 
            var selectedEffect = $('#slide').val();
            var options = {};
            if(selectedEffect == 'scale'){  options = {percent: 0}; }
            else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
            $("#effect").toggle(selectedEffect,options,500);
        };

        $("#moduleMenuBtn").click(function() {
            runEffect();
            return false;
        });
    });
</script>

A:

You can just add some CSS to hide it initially, like this:
​#effect { display: none; }​

Or inline, like this:
<div id="effect" style="display: none;">Some Content</div>

