Expand a div on click

sevelina

New Member
My problem is fairly simple for many of you.I want to expand the div(onClick) to fit the outer div and it should completely cover all the other three divs.(not fullscreen)I am trying to do this using the following code but the entire structure of page gets disturbed when i try to do this.\[code\]<head runat="server"><title>Untitled Page</title><link href="http://stackoverflow.com/questions/14045500/css/jquery-ui.css" rel="stylesheet" type="text/css" /><script src="http://stackoverflow.com/questions/14045500/js/jquery-1.8.1.min.js" type="text/javascript"></script><script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script><style type="text/css"> .toggler { max-width: 500px; max-height: 270px; position: relative; } .newClass { height: 500px; width: 290px; display: inline-block; z-index: 10000px; float: left; } .divClass { float: left; vertical-align: middle; height: 50px; width: 500px; }</style><script type="text/javascript">$(document).ready(function(){ $('#div1').click(function() { $('#div1').toggleClass('newClass'); }); });</script></head><body><form id="form1" runat="server"><table width="100%"> <tr style="height: 100%;"> <td style="width: 30%; height: 500px;"> </td> <td style="width: 70%; height: 500px;"> <div style="width: 100%; height: 500px;"> <table style="height: 500px; width: 100%;"> <tr> <td class="toggler"> <div id="div1" style="background-color: Black;"> Hello World! </div> </td> <td style="width: 50%" class="toggler"> <div id="div2" style="background-color: Blue; width: 100%; height: 100%;"> </div> </td> </tr> <tr> <td style="width: 50%" class="toggler"> <div id="div3" style="background-color: Red; width: 100%; height: 100%;"> </div> </td> <td style="width: 50%" class="toggler"> <div id="div4" style="background-color: Maroon; width: 100%; height: 100%;"> </div> </td> </tr> </table> </div> </td> </tr></table></form>\[/code\]What exactly is the problem with my code???? please help..
Note: I've also tried addClass and removeClass methods.. No good results...
 
Back
Top