title: Swap div and contents on click
body: <p>Been trying to swap 2 divs. When the button is clicked #profeditclick1, #profswitch1 should swap with #hideedit1. At the moment when the button is clicked all the divs just disappear. Thank for your help or guidance.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="cart_verwrap" &gt;
  
      &lt;div class="cart_verbill" *id="profswitch1"&gt;
  
      &lt;div class="btn blue cartprof-btn l-btn txt_fff s16" id="profeditclick1"&gt;Edit&lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- hidden edit profile in css it set to display:none--&gt;
                     &lt;div class="cart_verbill" id="hideedit1"&gt;
  
  
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code> $("#profeditclick1").click(function(e) {
          e.preventDefault();
          var content = $(this).html();
          $('#profswitch1').replaceWith('&lt;div id="hideedit1"&gt;' + content + '&lt;/div&gt;');
        });
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>Next attempt although doesnt seem to work. i have taken of the display:none and tried to hide it:</p>
  
  <pre><code>$("#hideedit1").hide();
  $("#profeditclick1").click(function(e) {
      e.preventDefault();
      var content = $(this).html();
      $('#profswitch1').replaceWith('&lt;div id="hideedit1"&gt;' + content + '&lt;/div&gt;');
      $("#hideedit1").show();
  });
  </code></pre>