how to swap two div by button click code example

Example 1: how to swap two div by button click

<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
<p style="margin:0; color:red;">
This div displayed when the web page first loaded.
</p>
</div>
<div id="swapper-other" style="display:none; border:2px dotted blue; padding:25px;">
<p style="margin:0; color:blue;">
This div displayed when the link was clicked.
</p>
</div>

Example 2: how to swap two div by button click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="swapper-first" style="display:block; border:2px dashed red; padding:25px;">
  <p style="margin:0; color:red;">
    This div displayed when the web page first loaded.
  </p>
</div>
<div id="swapper-other" style="display:block; border:2px dotted blue; padding:25px;">
  <p style="margin:0; color:blue;">
    This div displayed when the link was clicked.
  </p>
</div>
<p style="text-align:center; font-weight:bold; font-style:italic;">
  <a href="javascript:SwapDivsWithClick()">(Swap Divs)</a>
</p>