Question

I’ve got the following code:

$('#hideButton').click(function() {
        $('#menu').animate({
            opacity: 0.25
            });
        $('#hideButton').val('Show');
        $('#hideButton').attr('id','showButton');
    });

    $('#showButton').click(function() {
        $('#menu').animate({
            opacity: 1
            });
        $('#showButton').val('Hide');
        $('#showButton').attr('id','hideButton');
    });

As you see #hideButton should reduce div opacity to 0.25 and then change it’s id to showButton. When I click showButton it should increase the div opacity to 1 but for some reason the code isn’t working after clicking the changed button.

Answer 1

I would not modify the IDs and would just go off of the value of the button to determine which action should be taken:

$('#hideButton').click(function() {         
    var ele = $(this);
    if(ele.val() == "Hide"){ 
        ele.val('Show');
        $('#menu').animate({ opacity: 0.25 }); 
    }else{
        ele.val('Hide');
        $('#menu').animate({ opacity: 1 });
    }
});

Working example: http://jsfiddle.net/Rt4QY/