title: toggling the movement of content from one div to another
body: <p>Searched everywhere but cannot find an answer to this problem. When I click on a button I want content to move from one div to another and then when clicked again to move back. Can make the initial move no problem but it's the getting back.</p>
  
  <p>Here's my code so far...</p>
  
  <pre><code>$(document).ready(function(){
      $(function(){$('#button').click(function() {
         $(this).val() == "Move Content" ? initial_move() : move_back();
          });
      });
  
      function initial_move() {
          $('#button').val("Move Back");
          $("#two").append($("#toggle_txt").html());  
          $('div#one #toggle_txt').remove();
      };
  
      function move_back() {
          $('#button').val("Move Content");
          $("#one").append($("#toggle_txt").html());  
          $('div#two #toggle_txt').remove();
      };
  });
  
  
  &lt;input type="button" value="Move Content" id="button" /&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;div id="one"&gt;
      &lt;p&gt;Div One permanent text&lt;/p&gt;
      &lt;p id="toggle_txt"&gt;Text to toggle between the two&lt;/p&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;div id="two"&gt;
      &lt;p&gt;Div Two permanent text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/eBuAz/" rel="nofollow">http://jsfiddle.net/eBuAz/</a></p>
  
  <p>I don't see why this code shouldn't work. Any help greatly appreciated.</p>
  
  <p>Thanks</p>