title: Expandable box in javascript
body: <p>I am having some trouble with aligning four div boxes next to each other, Or more correctly, I have aligned my two “head” boxes next to each other but my problem is that I am using them as a expand-collapse container and those boxes will make a damage in  other expandable box on line 2! so when you expand the box "head 1" the box "head 4" will float to right!</p>
  
  <p>I want box "head 4" and box "head 3" to go down instead of floating right and left when you expand box 1 or 2 </p>
  
  <blockquote>
    <p>Guys asked me too run this to be easier for them to see whats going
    on, I am totally sorry ill be aware next time to reduce the code, Here
    is the boxs running 
    <a href="http://www.shoutoutoffice.com/instagram-followers/instagramfeed/" rel="nofollow">Demo</a></p>
    
    <p>You can check the boxes by simply trying to expand each and the
    problem will be so clear</p>
  </blockquote>
  
  <p>and Here is my code i am having problem with as reference:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;TITLE&gt;Expandable and collapsible table - demo&lt;/TITLE&gt;
      &lt;script type="text/javascript"&gt;
      function toggle_visibility(tbid,lnkid)
      {
      var obj = document.getElementsByTagName("table");
      for(i=0;i&lt;obj.length;i++)
      {
      if(obj[i].id &amp;&amp; obj[i].id != tbid)
      {
       document.getElementById(obj[i].id).style.display = "none";
      x = obj[i].id.substring(3);
      document.getElementById("lnk"+x).value = "[+] Expand";
      }
      }
      if(document.all){document.getElementById(tbid).style.display =              document.getElementById(tbid).style.display == "block" ? "none" : "block";}
     else{document.getElementById(tbid).style.display =     `document.getElementById(tbid).style.display == "table" ? "none" : "table";}`
    document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-]        Collapse" ? "[+] Expand" : "[-] Collapse";
       }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
  #tbl1,#tbl1 {display:none; text-transform: uppercase;}
  #tbl2,#tbl2 {display:none; text-transform: uppercase;}
  #tbl3,#tbl3 {display:none; text-transform: uppercase;}
  #tbl4,#tbl4 {display:none; text-transform: uppercase;}
  td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
  td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
  a {TEXT-DECORATION: none;}
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
   &lt;table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0"&gt;
    &lt;tr bgcolor="#4682B4" height="50"&gt;
     &lt;td width="5%"&gt;&lt;/td&gt;
     &lt;td width="45%"&gt;&lt;font size="4" face="tahoma" color="white"&gt;&lt;strong&gt;Header 1&lt;/strong&gt;        &lt;/font&gt;&lt;/td&gt;
     &lt;td bgcolor="#4682B4" align="center" width="50%"&gt;&lt;input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td colspan="3"&gt;
      &lt;table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1"&gt;
  &lt;td colspan="3"&gt;&lt;div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"&gt; Just modify width and height values to get what you need...&lt;/div&gt;    &lt;/table&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0"&gt;
    &lt;tr bgcolor="#4682B4" height="50"&gt;
     &lt;td width="5%"&gt;&lt;/td&gt;
     &lt;td width="45%"&gt;&lt;font size="4" face="tahoma" color="white"&gt;&lt;strong&gt;Header 2&lt;/strong&gt;   &lt;/font&gt;&lt;/td&gt;
     &lt;td width="50%" bgcolor="#4682B4" align="center"&gt;&lt;input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"&gt;&lt;/td&gt;
    &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td colspan="3"&gt;
      &lt;table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2"&gt;
       &lt;tr&gt;
       &lt;td colspan="3"&gt;&lt;div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"&gt; Just modify width and height values to get what you need...&lt;/div&gt;&lt;/table&gt;
     &lt;/tr&gt;
     &lt;/td&gt;
   &lt;/table&gt;
  
  
      &lt;table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0"&gt;
    &lt;tr bgcolor="#4682B4" height="50"&gt;
     &lt;td width="5%"&gt;&lt;/td&gt;
     &lt;td width="45%"&gt;&lt;font size="4" face="tahoma" color="white"&gt;&lt;strong&gt;Header 3&lt;/strong&gt;  &lt;/font&gt;&lt;/td&gt;
     &lt;td width="50%" bgcolor="#4682B4" align="center"&gt;&lt;input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td colspan="3"&gt;
      &lt;table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3"&gt;
       &lt;tr&gt;
    &lt;td colspan="3"&gt;&lt;div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"&gt; Just modify width and height values to get what you need...&lt;/div&gt;&lt;/table&gt;
     &lt;/tr&gt;
     &lt;/td&gt;
   &lt;/table&gt;
  
      &lt;table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0"&gt;
    &lt;tr bgcolor="#4682B4" height="50"&gt;
     &lt;td width="5%"&gt;&lt;/td&gt;
     &lt;td width="45%"&gt;&lt;font size="4" face="tahoma" color="white"&gt;&lt;strong&gt;Header 4&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt;
     &lt;td width="50%" bgcolor="#4682B4" align="center"&gt;&lt;input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td colspan="3"&gt;
      &lt;table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4"&gt;
       &lt;tr&gt;
    &lt;td colspan="3"&gt;&lt;div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"&gt; Just modify width and height values to get what you need...&lt;/div&gt;&lt;/table&gt;
     &lt;/tr&gt;
     &lt;/td&gt;
   &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>