Question

Why does this not work? I have looked for tutorials online but they only show how to show/hide with a button. I want to toggle the height of an element.

$('.oldestinititives').mousedown(function() {
    $(this).animate({"height": 450}, "slow");
    $(this).addClass("pop");
});
$('.pop').mousedown(function() {
    $(this).animate({"height": 250}, "slow");
    $(this).removeClass("pop");
});

in the CSS, the block is 250px by default. Clicking the element does reveal the content, but clicking it again does not hide it. Using firebug I can see that the class ‘pop’ is added but it doesn’t seem to target it. What is going on?

thanks,
Evan

Answer 1

try this (working example
http://jsfiddle.net/saelfaer/CyD2g/)

$('.oldestinititives').live("click", function() {
    if($(this).is('.pop'))
    {
        $(this).animate({"height": 250}, "slow", function(){
            $(this).toggleClass("pop");
        }); 
    }
    else
    {      
        $(this).animate({"height": 450}, "slow", function(){
            $(this).toggleClass("pop");
        }); 
    }
});

i took the liberty to merge your two event handlers in one, as they could have been merged, depending on what you actually do inside the function you could make it even shorter without the big if-else structure…

the idea here is that you use .live("click", function(){}); this will bind the event to any item that ever will be a valid candidate for your selector. even when at the time of executing the code the element does not have the right class name or ID yet.