Question

Right, so I’ve got an example website I’m making, and I’m using mostly jQuery. On my footer, I’m getting it to animate on click, and I’ve got it to change the ID of the footer after the click and animation has happened. But when I click it again (to carry out the jQuery commands of the new ID) it doesn’t work. it appears that none of the jQuery code is excecuted after the change of ID. Here is the code used:

This is the code to change the ID in the first instance:

$("#footer").click(function(){
    $("#footercontent").animate({height:"200px"});
    $("#footer").attr("id", "footerclose");

This is the code to change the ID back:

$("#footerclose").click(function(){
    $("#footercontent").animate({height:"1px"});
    $("#footercontent").hide();
    $("#footerclose").attr("id", "footer");
});

This is the CSS for the footer content:

#footercontent {
    width:990px;
    height:1px;
    text-align:center;
    background-color:#FFF;
    padding:5px;
    box-shadow:inset 0 0 25px #000;
    border:0px;
}

And this is the footer and footerclose CSS:

#footer {
    color:#999;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    z-index:99;
    width:150px;
    height:30px;
    border:0px;
    padding:5px;
}

#footerclose {
    color:#999;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    width:150px;
    height:30px;
    border:0px;
    padding:5px;

You can find the site in question here: http://epicgiggle.co.uk/test/example/

I’ve looked everywhere and there is no solution.

Help is much appreciated.

Answer 1

You should use jQuery live because the element is not present on the page when you try to attach click event handler.

Try this

$("#footer").live('click', function(){
    $("#footercontent").animate({height:"200px"});
    $("#footer").attr("id", "footerclose");
});

$("#footerclose").live('click', function(){
    $("#footercontent").animate({height:"1px"});
    $("#footercontent").hide();
    $("#footerclose").attr("id", "footer");
});