" 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
These days while creating web applications we are increasingly finding ourselves in situations where we have to show data selectively. For instance using tab/ accordion/ show-hide div to display data is one such situation. This tip is an example of expand and collapse features which can be implemented to interactively show data to user.
This technique can be used with tab panel,accordion menu or a even a single div (with show/hide functionality implemented) using cool effects from jQuery.
Just copy and paste the code below in notedpad, save it as .html document and test it. No need to download jquery.js or include it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv= "Content-Type" content="text/html; charset=utf-8" />
<script type= "text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Untitled Document</title>
<script type='text/javascript'>
function sldeUpDown(id,header){
if($("#"+id).css('display') == 'block'){
$("#"+id).slideUp('slow');
$('#'+header).html('Click To Expand');
}
else {
$("#"+id).slideDown('slow');
$('#'+header).html('Click To Collapse');
}
}
function expandAll(){
$(".demo").slideDown('slow');
$(".demo1").slideDown('slow');
$('.header1').html('Click To Collapse');
$('.header2').html('Click To Collapse');
}
function colapseAll(){
$(".demo").slideUp('slow');
$(".demo1").slideUp('slow');
$('.header1').html('Click To Expand');
$('.header2').html('Click To Expand');
}
</script>
</head>
<body>
<div><input type="button" value="expand all" onclick= "expandAll();"> <input type="button" value="collapse all" onclick="colapseAll();"><br />
<div style="background-color:yellow" id= "header1" onclick="sldeUpDown('extend1','header1');"> Click To Expand </div>
<div align="center" valign="center" id='extend1' style="display:none;">
<table width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" height='300' >
<tr>
<td align= 'left' valign='top'>
content
</td>
</tr>
</table>
</div><br />
<div style="background- color:#7fc807" id="header2" onclick="sldeUpDown('extend2','header2');" class= "header2"> Click To Expand </div>
<div align="center" valign= "center" id='extend2' style="display:none;">
<table width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" height='300' >
<tr>
<td align='left' valign='top'>
content
</td>
</tr>
</table>
</div><br />
<div style="background-color:yellow" id= "header3" onclick="sldeUpDown('extend3','header3');"> Click To Expand </div>
<div align="center" valign="center" id='extend3' style="display:none;">
<table width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" height='300' >
<tr>
<td align= 'left' valign='top'>
content
</td>
</tr>
</table>
</div><br />
<div style="background- color:#7fc807" id="header4" onclick="sldeUpDown('extend4','header4');" class= "header2"> Click To Expand </div>
<div align="center" valign= "center" id='extend4' style="display:none;">
<table width="625" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" height='300' >
<tr>
<td align='left' valign='top'>
content
</td>
</tr>
</table>
</div>
</body>
</html>