I have a two box, with the first box having an ***"Open"*** `<button>`

```
<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>​

```

When clicking the ***"Open"*** `<button>` the first box will slide to the left by 50%, then change the ***"Open"*** to ***"Close"*** button. I came up with this jQuery solution:

```
$(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#close').on('click', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            // alert('done');
        });
    });
});​

```

I managed to change the `ID` and text of the `<button>` (checked via Inspect Element). However when I click the ***"Close"*** `<button>` it is not working. What seems to be the problem in here? I even tried `alert(1)` on the `$('#close')` to see if it does see the ***Close*** `ID` but no luck.

jsFiddle [here](http://jsfiddle.net/QLpVM/1/).