jQuery function not working

$("#trigger-1").click(function () {
    $("#secondary").animate({ width: 0 });
    $("#primary").animate({ width: '100%' });
    $("#panel-1").css({ display: "block" }).animate({
        height: 200,
        width: '100%',
        opacity: 1
    });
    return false;
});
$("#trigger-2").click(function () {
    $("#secondary").animate({ width: 0 });
    $("#primary").animate({ width: '100%' });
    $("#panel-2").css({ display: "block" }).animate({
        height: 200,
        width: '100%',
        opacity: 1
    });
    return false;
});
$("#return").click(fu开发者_开发技巧nction () {
    alert(1);
    $("#primary").animate({ width: '60%' });
    $("#secondary").animate({ width: '40%' });
    $(".panel").animate({
        height: 0,
        width: 0,
        opacity: 0
    });
    return false;
});

Return is not working for panel-2. Please check this fiddle: http://jsfiddle.net/HTVXv/ Also, please guide me if its possible to refactor and reduce the code.

Thanks!

No wonder, id's should be unique, so you cannot use them twice.

A solution is to use a class, like class="return" and $(".return").click()

The "id" attribute must be unique on the page; you're trying to give both "Return" links the id of "return", so only the first one has that id. Try using a class instead.

It's not working because you have two "a"s with same id. Try renaming one of those and bind it to click and it will work.