me_myself
09-13-2007, 09:21 PM
Please see the below code. When i click on the close image, the collapseWindow div should be hidden and the rightColumn should occupy the area. When i click on the image again, the collapseWindow DIV should Show as on the default view and rightColum should go back to its original width.
Please Help.
<html><head>
<style>
#wrapper{width:100%;}
#leftColumn{width:25%; float:left; background-color:#CCCCCC;}
#rightColumn{width:75%; float:left; background-color:#6699FF;}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftColumn">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50px"><a href="#"><img src='http://www.totaltutorials.com/img/thumb/1690.jpg' width=50 height="50" border="0" ></a></td>
<td>
<div id="collapseWindow">this div should be hidden and the rightColumn should occupy this area </div>
</td>
</tr>
</table>
</div>
<div id="rightColumn">
<p><br>
Right Column <br>
</p>
</div>
</div>
</body>
</html>
Please Help.
<html><head>
<style>
#wrapper{width:100%;}
#leftColumn{width:25%; float:left; background-color:#CCCCCC;}
#rightColumn{width:75%; float:left; background-color:#6699FF;}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftColumn">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50px"><a href="#"><img src='http://www.totaltutorials.com/img/thumb/1690.jpg' width=50 height="50" border="0" ></a></td>
<td>
<div id="collapseWindow">this div should be hidden and the rightColumn should occupy this area </div>
</td>
</tr>
</table>
</div>
<div id="rightColumn">
<p><br>
Right Column <br>
</p>
</div>
</div>
</body>
</html>