Question

I would like to replace 1 div with another using a href links and jquery. Here is my setup.

<div id="parent">
<div class="child1">Child 1 Contents</div>
<div class="child2">Child 2 Contents</div>
</div>
<div id="replacepagelinks">
     <a href="#1">Replace Child 1 with Child 2</a>
     <a href="#2">Replace Child 2 with Child 1</a>
</div>

Does anybody know how to accomplish this using jquery? I would also like <a href=#1"></a> to disappear when it is selected and <a href="#2"></a> to appear and vice versa if that is possible?

Answer 1

If you want to hide the content based on the clicked element, you can try the following:

$(document).ready(function(){
   $('#replacepagelinks a').click(function(){
       $(this).hide().siblings().show()
       var w = this.hash.replace('#', '');
       $('#parent div.child'+w).show().siblings().hide()
   })
})