title: How to reverse animation on every second click?
body: <p>I have 6 "blocks" and each contains different texts, for the sake of simplicity let's just consider these as my "blocks"</p>
  
  <pre><code>&lt;div id="block1"&gt; &lt;h2&gt; Block1 &lt;/h2&gt; &lt;/div
  </code></pre>
  
  <p>I have 3 of them visible and 3 hidden. I have a button which replace the corresponding blocks</p>
  
  <pre><code>$(".showmore").click(function(){
  
      $("#block1").fadeOut("slow", function(){
          $(this).replaceWith($("#block4").html());
          $(this).fadeIn("slow");
      });
  
      $("#block2").delay(400).fadeOut("slow", function(){
          $(this).replaceWith($("#block5").html());
          $(this).fadeIn("slow");
      });
  
      $("#block3").delay(800).fadeOut("slow", function(){
          $(this).replaceWith($("#block6").html());
          $(this).fadeIn("slow");
      });
  
      $(this).text('Show less');
  
  });
  </code></pre>
  
  <p>It works fine but have no idea how to revert it. I tried to clone the elements to a variable and then load them but it seems like the id is gone because when I try to hide the block1 or the block4 none of them disappear. Can anyone help?</p>