title: how to replace div by other div on button click
body: <p>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 i.e 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 :</p>
  
  <pre><code>    &lt;script language="javascript" type="text/javascript"&gt;
        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";
  
                         }
                      } 
   &lt;/script&gt;
  
      &lt;center&gt;
  &lt;div id="one" style= " visibility:visible"&gt;
  //some code
  &lt;/div&gt;
  &lt;div id="two" style= " visibility:hidden"&gt;
  //some code
  &lt;/div&gt;        
  &lt;div id="three" style= " visibility:hidden"&gt;
  //some code
  &lt;/div&gt; 
  &lt;div id="four" style= " visibility:hidden"&gt;
  //some code
  &lt;/div&gt; 
  &lt;/center&gt;
  </code></pre>
  
  <p>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??</p>