how to replace div by other div on button click

Question

i want to replace a div by other div on button click. I have seen examples of show/hide div. But using this the second div is shown below first ie it shows on the next line. I want to not only hide the div but replace or show the div on the same position. My code is :

    <script language="javascript" type="text/javascript">
      function toggleDiv(Flag) 
                  {
                      if (Flag == 'one')
                         {
                             document.getElementById("one").style.visibility = "visible";
                             document.getElementById("two").style.visibility = "hidden";
                             document.getElementById("three").style.visibility = "hidden";
                             document.getElementById("four").style.visibility = "hidden";

                         } 


                        else if (Flag == 'two')
                       {
                           document.getElementById("two").style.visibility = "visible";
                          document.getElementById("one").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "hidden";
                           document.getElementById("four").style.visibility = "hidden";
                       }
                       else if (Flag == 'three')
                        {
                           document.getElementById("one").style.visibility = "hidden";
                           document.getElementById("two").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "visible";
                           document.getElementById("four").style.visibility = "hidden";
                       }
                       else if (Flag =='four')
                       {
                           document.getElementById("one").style.visibility = "hidden";
                           document.getElementById("two").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "hidden";
                           document.getElementById("four").style.visibility = "visible";
                       }
                       else {
                           document.getElementById("one").style.visibility = "visible";
                           document.getElementById("two").style.visibility = "hidden";
                           document.getElementById("three").style.visibility = "hidden";
                           document.getElementById("four").style.visibility = "hidden";

                       }
                    } 
 </script>

    <center>
<div id="one" style= " visibility:visible">
//some code
</div>
<div id="two" style= " visibility:hidden">
//some code
</div>        
<div id="three" style= " visibility:hidden">
//some code
</div> 
<div id="four" style= " visibility:hidden">
//some code
</div> 
</center>

This code works perfectly but as i said it shows each div on next line i want it to b on same line. Any Help??

Answer 1

使用css并在div类中添加属性。