PDA

View Full Version : Close DIV On Image Click - Please Help



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>
&nbsp;</p>
</div>
</div>
</body>
</html>

rdutton
09-14-2007, 12:19 PM
Hi,

This example should fullfill your JavaScript needs, however you may like to repost any question about layout in the CSS forum.

http://www.theredplanet.org/examples/close_div_on_image_click.html

Ryan