Question

I’ve got a button(#nav-button) that increases an elements height. But I want the same button to also decrease the height when pressed again. The code:

    $(document).ready(function(){ 

        $('.nav-button-open').click(function(){
            $('.nav-bar').animate({height:'90px'}, 500);
            $("#nav-button").attr('class', 'nav-button-close');
        });
        $('.nav-button-close').click(function(){
            $('.nav-bar').animate({height:'10px'}, 500);
            $("#nav-button").attr('class', 'nav-button-open');
        });
    });​

Fiddle: http://jsfiddle.net/mdecler/e4XED/

The jQuery increases the height fine but I cannot decrease the height when I press the button again! What am I doing wrong?

Thx for your help!

Answer 1

Consider changing your jQuery code to:

    $(document).ready(function(){ 
        $('#nav-button').click(function(){
            if($(this).hasClass("nav-button-open")){
               $('.nav-bar').animate({height:'90px'}, 500);
               $("#nav-button").attr('class', 'nav-button-close');}
            else{
               $('.nav-bar').animate({height:'10px'}, 500);
               $("#nav-button").attr('class', 'nav-button-open');            
            }
        });
    });​

DEMO LINK:

http://jsfiddle.net/e4XED/4/