JQuery Toggle Button

Question

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>

Answer 1

Just use display:none; or visibility:hidden; on the #slide element in css. Or put $('#slide').hide(); at the beginning of javascript.

Also if you want to slide up/down, jQuery has native functions slideUp(), slideDown() and slideToggle(). See jQuery documentation.

Answer 2

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>