asked on

Is this possible .....

http://www.geocities.com/jezman2002/test.html

I am using javascript to hide and show a branch in a tree menu. I have an empty cell below the menu options that is 160px high. Now when the menu opens and pushes everything down is it possible to make the empty cell collapse to fit the content as much as possible ?

thanks for your time.

RozanaZ

Is this ok?

<html>
<head>
<title>Coating Systems International Limited (CSI)</title>
<script language="JavaScript">
function showBranch(branch) {
var objBranch =
document.getElementById(branch).style;
       var tdObj = document.getElementById("menuTd");
if(objBranch.display=="block")
       {
objBranch.display="none";
       tdObj.style.height = 160;
       }
else
       {
objBranch.display="block";
             tdObj.style.height = 10;
       }
}
</script>

<style>
body{
           margin:0px;
       scrollbar-arrow-color:#006666;
scrollbar-track-color:#ffffff;
       scrollbar-highlight-color:#006666;
       scrollbar-face-color:#C4DDDD;
       scrollbar-3dlight-color:#C4DDDD;
       scrollbar-base-color:#669999;
scrollbar-shadow-color:#C4DDDD;
}
.trigger{
cursor: pointer;
cursor: hand;
       padding-left:25px;
}
.branch{
color: #000000;
       font-family:Arial, Helvetica, sans-serif;
       font-size:8pt;
       font-weight:500;
display: none;
padding-left:30px;
       line-height:13px;
}
.mainlinks{
           font-family:Arial, Helvetica, sans-serif;
            font-size:9pt;
            color:#006666;
            font-weight:bolder;
      }
      .tblmain{
                  width:100%;
                  height:100%;
      }
      .menu{
            height: 30px;
      }
</style>

</head>
<body>
<table class="tblmain" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<table cellpadding="0" cellspacing="0" bgcolor="#C3E3E1">
<tr>
<td height="50px"> </td>
<td rowspan="7" bgcolor="#669999" width="16px"> </td>
<td rowspan="7" bgcolor="#006666" width="14px"> </td>
</tr>
<tr>
<td class="trigger" height="40px"><span class="mainlinks">COMPANY<br> PROFILE<br>
</span></td></tr>
<tr>
<td class="menu" width="165px">
<div class="trigger"
onClick="showBranch('branch1')">
<span class="mainlinks">PRODUCTS</span>
</div>
<span class="branch" id="branch1">
       TABLET COATING<br> MACHINE<br>
→  Efficiency<br>
→  Quality<br>
→  Material<br>
→  Drum<br>
→  Control<br>
             →  Cleaning<br><br>
             SPRAY GUN MACHINE<br>
→  Tags, Tags, Tags<br>
→  Hyperlinks</a><br>
→  Images<br>
→  Tables<br>
→  Forms<br><br></span>

       </td>
       </tr>
       <tr><td class="menu">
<div class="trigger"
onClick="showBranch('branch2')">
<span class="mainlinks">NEWS</span>
</div>
<span class="branch" id="branch2">
→  Inline Styles<br>
→  Document Wide Styles<br>
→  External Style Sheets<br>
→  Formatting Text<br>
→  Positioning<br><br>
</span>
              </td>
       </tr>
              <tr><td class="menu">
<div class="trigger"
onClick="showBranch('branch3')">
<span class="mainlinks">CASE STUDIES</span>
</div>
<span class="branch" id="branch3">
→  Inline Styles<br>
→  Document Wide Styles<br>
→  External Style Sheets<br>
→  Formatting Text<br>
→  Positioning<br><br>
</span>
       </td>
       </tr>
       <tr><td class="menu">
<div class="trigger"
onClick="showBranch('branch4')">
<span class="mainlinks">CONTACT US</span>
</div>
<span class="branch" id="branch4">
→  Object Detection<br><br>
</span>
                   </td>
       </tr>
            <tr><td id="menuTd" name="menuTd" height="160px"> </td></tr>
            <tr><td colspan="3"><div align="right"><img src="images/bottom.gif" width="195" height="113"></div></td>
            </tr>
</table>
       </td>
              </tr>
             </table>
</body>
</html>
</object></layer></div></span></style></noscript></table></script></applet>
<script language="JavaScript">var PUpage="76001081"; var PUprop="geocities"; </script><script language="JavaScript" src="http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript" src="http://www.geocities.com/js_source/ygIELib9.js?v3"></script><script language="JavaScript">var yviContents='http://us.toto.geo.yahoo.com/toto?s=76001081&l=NE&b=1&t=1094993766';yviR='us';yfiEA(0);</script><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1094993766" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=76001081&t=1094993766" ALT=1 WIDTH=1 HEIGHT=1>

Eternal_Student

ASKER

woa .. can you actually explain what you did there to change my code ?
Its nearly what I want, except in Netscape 6 when you close the branch the cell doesn't retract to its normal postion???

ASKER CERTIFIED SOLUTION

PashaMod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial