Toggle animation not work

Question

Hi all i have this script and I want when I click #select tag height should be 200px and when I click next time get back 20px

$('#select').click(function(){
        $('#select').toggle(
            function(){
                $('#select').animate({height:"200px"},200);
            },
             function(){
                $('#select').animate({height:"20px"},200);
            }
        );
    });

Answer 1

The toggle() method doesn't really work that way, inside a click() function. Consider simplifying your script and using CSS transitions:

http://jsfiddle.net/isherwood/7gk7mvzv

#select {
    background: #eee;
    height: 50px;
}
#select.height20 {
    height: 20px;
    transition: height 0.2s;
}
#select.height200 {
    height: 200px;
    transition: height 0.2s;
}

$('#select').click(function () {
    $(this).toggleClass('height20 height200')
});

<div id="select" class="height20">Select div</div>