JQuery replace div

[Nicky Eng]

I have a div element1

and inside I have a menu div and a content div, like this:

<div id="element1">
  <div id="menu">
    <li>item A</li>
    <li>item B</li>
    <li>item C</li>
  </div>
  <div id="content">
         <img  />
  </div>
</div>

<div id="menu2">
  <li>item 1</li>
  <li>item 2</li>
  
</div>

But I do also have another menu2 which is hidden and will be display when user select one of the menu item in "id=menu" Menu. In css, i put like this:

#menu2 {
   display:none;
   width:100;
   height:100;
   ...
}

// 

I want to replace id=menu with id=menu2 when user click item in id=menu, my jquery would be :

$("#menu").replaceWith( $("#menu2") );
$("#menu2").css("display", "block");

Surprisingly, the first time user click item in id=menu the id=menu2 appears and replaced id=menu.
But then try again 2nd time, it doesn't work. The id=menu2 is not appearing. Unless I refresh my page.

Am I doing anything wrong with my JQuery code ?

Please help...its urgent
Thanks

[Eric Pascarello]

That html markup is invalid, you are missing uls.

You are creating two copioes of the same element on the page. You need to remove the original one.

Eric

[Nicky Eng]

I used .hide() and .show()...and it works.

Thanks a lot then.