Animate height of div when button is clicked

Question

I'm trying to animate a drop down menu div's height from 0 to 250px, when the menu button is clicked. I tried using jQuery.

This is included in my HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="scripts.js"></script>

The menu button is a span:

<span id="menu_btn" name="menu_button">MENU</span>

And this is the drop down menu:

<div id="menu_dropdown">
    <ul>
        <li><a id="on" href="#">HOME</a></li>
        <!-- more buttons -->
</div>

And this is the jQuery:

$("#menu_btn").toggle(function(){
    $("#menu_dropdown").animate({'height': '250px'}, 100);
}, function(){
    $("#menu_dropdown").animate({'height': '0px'}, 100);
});

However it doesn't work. Why is this?

Answer 1

I think this is what you want:

$("#menu_btn").on('click', function() {
    $("#menu_dropdown").slideToggle(100);
});

Changing the height will probably not work because the it will not prevent the content for being shown. slideToggle() changes the display property, which will work.

See also http://api.jquery.com/slideToggle/

Answer 2

Span is not a button or anchor tag. Also you need to catch a click event first in order to use toggling.

http://jsfiddle.net/3w2tt1wm/

Take alook

Answer 3

Try using anonymous functions in your animate calls instead like below. Then you can explicitly get the element you want to change the height for and do it using jquery's .height(HEIGHT) or .css("height", HEIGHT);

$("#menu_btn").toggle(function(){
    $("#menu_dropdown").animate(function(){$("#menu_dropdown").css("height", "250px");}, 100);
}, function(){
    $("#menu_dropdown").animate(function(){$("#menu_dropdown").css("height", "0px");}, 100);
});

Also, you didn't show it so just make sure the toggle is in a click or mouseover handler function. It won't do you any good otherwise.