" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
he following piece of code illustrates the extended div panel. Click on the link, the div will expand and display information.
But before proceeding do note that for the following code snippet to work, you must download jquery-1.3.2.js from here (hhttp://docs.jquery.com/Release:jQuery_1.3.2)
1.Include the following script inside the head section.
<script type='text/javascript' src='jquery-1.3.2.js'></script>
<script type='text/javascript'>
/*Slide down*/
function slide_up_down(){
$("#extend").hide();
$("#display_box").slideDown("slow");
}
/*Slide up*/
function slide_up(){
$("#display_box").slideUp("slow");
$("#extend").show();
}
</script>
2.Include the following section inside the body section.
<div align="center" valign="center" id='extend' >
<table width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" height='300' >
<tr>
<td align='left' valign='top'>
<a href='#' width='75' onClick='slide_up_down()'>Click Me To Extend</a>
</td>
</tr>
</table>
</div>
<div align="center" valign="center" id='display_box' style="display:none;" >
<table width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF66FF" height='300' >
<tr>
<td align='left' valign='top'><a href='#'onClick='slide_up()'>Cancel</a>
</td>
</tr>
<tr>
<td align='center' valign='middle'>
<b>Hello World!!!!!!!!!!</b>
</td>
</tr>
</table>
</div>