How to replace one div with another when clicking the html hyperlink [duplicate]

Question

Possible Duplicate:
Replace Div with another Div

Hi,

I have got 2 navigation menus, what I want to do when a client click on a link of first menu , the div id="img" should be replaced by div id="img2" , similarly when i click on the link of menu 2 div id="img2" should be replaced by div id="img" . Any ideas or suggestions ..

Answer 1

Something like this might help you:

//Using jQuery Change div attribute "id" on click:

$('#link_1_id').click(function(){ 
      $('#img').attr('id','img2'); 
});

Edit: Oops didnt understand the question. To replace a div with another when clicking a link element:

HTML:
<a href="#" id="link_1">Press me</a>
<a href="#" id="link_2">Press me</a>

<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>

Jquery:
$(document).ready(function(){

  // Hide div 2 by default
  $('#div_2').hide();

  $('#link_2').click(function(){ 
      $('#div_1').hide();
      $('#div_2').show();
  });

  $('#link_1').click(function(){ 
      $('#div_2').hide();
      $('#div_1').show();
  }); 
});

To add sliding effects take a look at .slideDown() or slideUp(). http://api.jquery.com/slideDown/