I want to show the div in place of the other div

Question

I want to show the div2 in replace of the div1 which style.display="none". When i'll click the retaurants td it will replace the div1 with div 2 then show the div 2 in place of div1.

html:

<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna"  id="links" bordercolor="#000000" bgcolor="#FFFF00">
    <td class="product_image" id="id1" bordercolor="#666666" style="border:solid"> 

         <h1><span style="background-color:#999999"> Stay </span></h1>  
    </td>

    <td class="Product_image" id="id2" bordercolor="#666666" style="border:solid"  onClick="dd(id)">
        <h1>Restaurants </h1>
    </td>   
    <td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
        <h1> Things to do </h1>
     </td>
        <!--shopping btn column -->
    <td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
        <h1> Shopping </h1>

     </td>
</tr>




  <tr>
    <div id="div1">
      <td width="550"  height="200" colspan="4" bgcolor="e0e722">
         <text style="font-size:20px; font-family:Monotype Corsiva;"> Where 
           You Wanna Go? </text>
         <form class="demo">
            <div class="dropdownstay"

             </div>

          </form>
        </td>
       </div>
     </tr>


    <tr>
     <div id="div2" style="display:none;>
       <td width="550"  height="200" colspan="4" bgcolor="e0e722">
         <text style="font-size:20px; font-family:Monotype Corsiva;"> What 
          You Wanna eat? </text>
          <form class="demo">
           <div class="dropdownstay"

           </div>

       </form>
      </td>
     </div>
   </tr>
   </table>
  </div>

javascript:

 <script type="text/javascript">
 function dd(id) {
 if(id=='id2')
   {

      var ele = document.getElementById("div2"); 
      if(ele.style.display == "none") 

      {

        ele.style.display = "block";

         }

   } 
  }

 </script>

my code is showing the div2 but above the div1. I want to show my div2 in place of div1. thanks in advance.

Answer 1

I think you should try something like this:

First remove your div2

JavaScript:

var ele = document.getElementById("div1"); 
if(ele.style.display == "none") {
   ele.style.innerHTML= '
    <td width="550"  height="200" colspan="4" bgcolor="e0e722">
     <text style="font-size:20px; font-family:Monotype Corsiva;"> 
       What You Wanna eat? 
     </text>
     <form class="demo">
      <div class="dropdownstay">
      </div>
   </form>
  </td>';

}

Here you have the idea, but you can optimize this, because, in your HTML you have similar code so you can reuse it by factoring it. I think you should only replace the content. (Your real problem is that you are using a div into a tag to wrap a tag, so you can keep your first idea with inline style modification and remove useless ).

Working example:

 function dd(id) {
 if(id=='id2'){
var ele = document.getElementById("div1");
   ele.innerHTML= 
    '<td width="550"  height="200" colspan="4" bgcolor="e0e722">'+
     '<text style="font-size:20px; font-family:Monotype Corsiva;"> '+
       'What You Wanna eat?'+ 
     '</text>'+
     '<form class="demo">'+
      '<div class="dropdownstay">'+
      '</div>'+
   '</form>'+
  '</td>';

 } 
}

<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna"  id="links" bordercolor="#000000" bgcolor="#FFFF00">
    <td class="product_image" id="id1" bordercolor="#666666" style="border:solid"> 

         <h1><span style="background-color:#999999"> Stay </span></h1>  
    </td>

    <td class="Product_image" id="id2" bordercolor="#666666" style="border:solid"  onClick="dd(id)">
        <h1>Restaurants </h1>
    </td>   
    <td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
        <h1> Things to do </h1>
     </td>
        <!--shopping btn column -->
    <td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
        <h1> Shopping </h1>

     </td>
</tr>

  <tr id="div1">
      <td width="550"  height="200" colspan="4" bgcolor="e0e722">
         <text style="font-size:20px; font-family:Monotype Corsiva;"> Where 
           You Wanna Go? </text>
         <form class="demo">
            <div class="dropdownstay"

             </div>

          </form>
        </td>
     </tr>
   </table>
  </div>

EDIT

Here is a solution using inline style:

function dd(id) {
 if(id=='id2'){
      var tr1 = document.getElementById("tr1"); 
      var tr2 = document.getElementById("tr2"); 
      if(tr2.style.display == "none"){
        tr2.style.display = "block";
        tr1.style.display = "none";
      }
  }
}      


   

<table id="Table_01" width="800" height="400" border="0" cellpadding="0" cellspacing="0">
<tr class="hoverkarna"  id="links" bordercolor="#000000" bgcolor="#FFFF00">
    <td class="product_image" id="id1" bordercolor="#666666" style="border:solid"> 

         <h1><span style="background-color:#999999"> Stay </span></h1>  
    </td>

    <td class="Product_image" id="id2" bordercolor="#666666" style="border:solid"  onClick="dd(id)">
        <h1>Restaurants </h1>
    </td>   
    <td class="Product_image" id="id3" bordercolor="#666666" style="border:solid" onClick="dd(id)">
        <h1> Things to do </h1>
     </td>
        <!--shopping btn column -->
    <td colspan="2" class="Product_image" id="id4" bordercolor="#666666" style="border:solid" onClick="dd(id)">
        <h1> Shopping </h1>

     </td>
</tr>




  <tr id="tr1">
      <td width="550"  height="200" colspan="4" bgcolor="e0e722">
         <text style="font-size:20px; font-family:Monotype Corsiva;"> Where 
           You Wanna Go? </text>
         <form class="demo">
            <div class="dropdownstay">
             </div>

          </form>
        </td>
     </tr>


    <tr id="tr2" style="display:none">
       <td width="550"  height="200" colspan="4" bgcolor="e0e722">
         <text style="font-size:20px; font-family:Monotype Corsiva;"> What 
          You Wanna eat? </text>
          <form class="demo">
           <div class="dropdownstay">
           </div>
       </form>
      </td>
   </tr>
   </table>