Question

I have created one menu using div animating in the middle i have structured. present when i clicked on open button that div menu is expending to right side some fixed width. but my requirement is after expanded the menu instead of open “close” word need to append. when click on “close” div menu should collapse to previous width and “open” will come instead of close.

Answer 1

The animate function has a complete parameter where you can provide a callback.
http://api.jquery.com/animate/

This callback will be triggered after the event completes.
In this callback you can edit your values.

Change the class of your li to ‘close’.
Also: use the ‘live’ binding. This one will work even with dynamic changing html.

CSS:

.open{
    cursor:pointer;
    background:black;
    color:white;
}
.close {
    cursor:pointer;
    background:black;
    color:white; 
}

JS:

$(".open").live('click', function() {
$("#navMenu").animate({
    width: "82px"
}, {
    queue: false,
    duration: 500,
    complete: function() {
        $(".open").text("<- CLOSE");
        var $this = $(".open");
        $this.removeClass();
        $this.addClass("close");
    }
});
});

$(".close ").live('click', function() {
$("#navMenu ").animate({
        width: "50px"
    }, {
        queue: false,
        duration: 500,
        complete: function() {
            $(".close").text("OPEN - >");
            var $this = $(".close");
            $this.removeClass();
            $this.addClass("open");
        }
    });
});​