Expandable box in javascript

Question

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!

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

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 Demo

You can check the boxes by simply trying to expand each and the problem will be so clear

and Here is my code i am having problem with as reference:

    <html>
    <head>
    <TITLE>Expandable and collapsible table - demo</TITLE>
    <script type="text/javascript">
    function toggle_visibility(tbid,lnkid)
    {
    var obj = document.getElementsByTagName("table");
    for(i=0;i<obj.length;i++)
    {
    if(obj[i].id && 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";
     }
    </script>
    <style type="text/css">
#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;}
    </style>
    </head>

    <body>
 <table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong>        </font></td>
   <td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
    </tr>
    <tr>
    <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><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;"> Just modify width and height values to get what you need...</div>    </table>
     </td>
    </tr>
    </table>

    <table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong>   </font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
  </tr>
    <tr>
    <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
     <tr>
     <td colspan="3"><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;"> Just modify width and height values to get what you need...</div></table>
   </tr>
   </td>
 </table>


    <table width="300px" border="0" style="float:right; margin-right:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong>  </font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
     <tr>
  <td colspan="3"><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;"> Just modify width and height values to get what you need...</div></table>
   </tr>
   </td>
 </table>

    <table width="300px" border="0" style="float:left; margin-left:300px" cellpadding="5" cellspacing="0">
  <tr bgcolor="#4682B4" height="50">
   <td width="5%"></td>
   <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
   <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
  </tr>
  <tr>
   <td colspan="3">
    <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
     <tr>
  <td colspan="3"><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;"> Just modify width and height values to get what you need...</div></table>
   </tr>
   </td>
 </table>
</body>
</html>

Please copy into a JSFiddle so so it is easier to read/see what is actually going on. Also, you are not using jQuery. You are using plain JavaScript. — Pat Burke, Feb 15 '13 at 17:24
Tables. Yay! What's with the tag at the end of your document? — Billy Moat, Feb 15 '13 at 17:24
You should reduce the amount of code to the minimum needed. This way it's easier for us to debug, and easier for you to explain. We definitely do not need to have the whole table. And if you can explain your problem with images or jsFiddle it would be way better. Also you are talking about div but all I see is tables. Can you be more precise? — Hugo Dozois, Feb 15 '13 at 17:44
You guys can be so harsh, please excuse me while I go wipe my inline-styled tables. :) — JerryHuang.me, Feb 15 '13 at 17:57
@HugoDozois Okay i added the code on a sup menu on my website please try to expand thee boxes and let me know if you can help with this. shoutoutoffice.com/instagram-followers/instagramfeed — Leo, Feb 15 '13 at 21:50
@Leo I posted a fix for your html but you should definitely look at another solution, like the first one I proposed. It would be a way cleaner html than having table embedded in tables. Also table should be used to represent tabular stuff not for layouts — Hugo Dozois, Feb 15 '13 at 22:46
@HugoDozois Thank you, i am trying to fix this for now till i find another solution as well, appreciating your help, but may i be greedy to ask for last time, i tried to clear : both but look like the 3 and 4 boxes linked to each others now, you can check my sub page to see the problem happened when i cleared both. thank you again :) — Leo, Feb 15 '13 at 23:32
@Leo try with the html I posted. You must have forgotten something! — Hugo Dozois, Feb 16 '13 at 00:01

Hugo Dozois · Accepted Answer · 2013-02-15T22:44:22.473

You should take a look at that jQuery accordeon. It would be a lot simpler for you. And would make your html a lot cleaner. Also take a look at jQuery library, it would simplify your life using JavaScript a lot. Also, you should put the style in css stylesheet so your css would be a lot more "DRY".

Else you can do a fix by following these steps:

grouping your table two by two in a div with float:left.
making all your tables float : left and then adapt the margins.
inserting a <div style="clear : both;" /> between the first and second table of each div.

Here is the fiddle showing the behavior

And the source code :

    <html>
        <head>
            <TITLE>Expandable and collapsible table - demo</TITLE>
            <script type="text/javascript">
            function toggle_visibility(tbid,lnkid)
            {
              var obj = document.getElementsByTagName("table");
              for(i=0;i<obj.length;i++)
              {
               if(obj[i].id && 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";
             }
                </script>
                <style type="text/css">
                #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;}
                    </style>
                </head>

                <body>
                   <div style="float : left">
                    <table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
                        <tr bgcolor="#4682B4" height="50">
                            <td width="5%"></td>
                            <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
                            <td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
                                    <td colspan="3"><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;"> Just modify width and height values to get what you need...</div> </table>
                            </td>
                        </tr>
                    </table>
                    <div style="clear : both"></div>
                    <table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
                        <tr bgcolor="#4682B4" height="50">
                            <td width="5%"></td>
                            <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
                            <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
                                    <tr>
                                        <td colspan="3"><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;"> Just modify width and height values to get what you need...</div></table>
                        </tr>
                    </td>
                </table>
              </div>
              <div style="float: left; margin-left:50px;">
                <table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
                    <tr bgcolor="#4682B4" height="50">
                        <td width="5%"></td>
                        <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong></font></td>
                        <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
                                <tr>
                                    <td colspan="3"><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;"> Just modify width and height values to get what you need...</div></table>
                    </tr>
                </td>
            </table>
            <div style="clear: both"></div>
            <table width="300px" border="0" style="float:left" cellpadding="5" cellspacing="0">
                <tr bgcolor="#4682B4" height="50">
                    <td width="5%"></td>
                    <td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
                    <td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
                            <tr>
                                <td colspan="3"><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;"> Just modify width and height values to get what you need...</div></table>
                </tr>
            </td>
        </table>
       </div>
    </body>
    </html>

Man your Amazing, Thank you a lot, i will keep in mind your advice and going to work on it right now, Warm regards :) — Leo, Feb 16 '13 at 00:35

Expandable box in javascript

1 Answers1