title: div slide open then close
body: <p>I have a two box, with the first box having an <strong><em>"Open"</em></strong> <code>&lt;button&gt;</code></p>
  
  <pre><code>&lt;div id="box1"&gt;
      &lt;button id="open" type="button"&gt;Open&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="box2"&gt;&lt;/div&gt;​
  </code></pre>
  
  <p>When clicking the <strong><em>"Open"</em></strong> <code>&lt;button&gt;</code> the first box will slide to the left by 50%, then change the <strong><em>"Open"</em></strong> to <strong><em>"Close"</em></strong> button. I came up with this jQuery solution:</p>
  
  <pre><code>$(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');
          });
      });
  });​
  </code></pre>
  
  <p>I managed to change the <code>ID</code> and text of the <code>&lt;button&gt;</code> (checked via Inspect Element). However when I click the <strong><em>"Close"</em></strong> <code>&lt;button&gt;</code> it is not working. What seems to be the problem in here? I even tried <code>alert(1)</code> on the <code>$('#close')</code> to see if it does see the <strong><em>Close</em></strong> <code>ID</code> but no luck.</p>
  
  <p>jsFiddle <a href="http://jsfiddle.net/QLpVM/1/" rel="nofollow">here</a>.</p>