Problem Description
Clicking on the + sign and - sign respectively the table data should expand and collapse
accordingly. This solution is developed using only with javascript and no post
back will happen for this click on + sign or - sign. Everything is done in the
client side only. Here two function is written to do this operation.
Solution Description
This solution contains two functions Toggle and ChangeImage, Togglegrpheader and
grpheader which is used to toggle between them and display the tabledata. This
solution is self explanatory which can be understood from the below mentioned
code snippet. All these things which are given here are given as per easy understanding
only.
Code Snippet
<script type="text/javascript">
function Toggle(id)
{
var tr = document.getElementById(id);
if (tr==null)
{
return;
}
var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
function ChangeImage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand)
img.src = sPlus;
else
img.src = sMinus;
}
}
function Toggle_GrpHeader()
{
ChangeImage('mainHeader', 'images/minus.gif', 'images/plus.gif');
Toggle('firstRow');
Toggle('secondRow');
Toggle('thirdRow');
}
function ToggleHeader()
{
ChangeImage('oneRowHeader', 'images/minus.gif', 'images/plus.gif');
Toggle('onlyOneRow');
}
</script>
<body>
<form id="form1" runat="server">
<div>
<table border="1" class="tblBg">
<tr id="grpHeader1" class="topHeader">
<td colspan="4"><span onclick="javascript:ToggleHeader();"><img
src="images/minus.gif" id="oneRowHeader"/>This is the
header for row 1</span></td>
</tr>
<tr id="onlyOneRow">
<td> TEST DATA</td>
<td class="number">test value 0</td>
<td class="number">test value 1</td>
<td class="number">test value 2</td>
</tr>
<tr id="grpHeader2" class="topHeader">
<td colspan="4"><span onclick="javascript:Toggle_GrpHeader();"><img
src="images/minus.gif" id="mainHeader"/>This as the main
header</span></td>
</tr>
<tr id="firstRow">
<td> TEST DATA</td>
<td class="number">test value 2 a</td>
<td class="number">test value 3</td>
<td class="number">test value 4</td>
</tr>
<tr id="secondRow">
<td> TEST DATA</td>
<td class="number">test value 5</td>
<td class="number">test value 6</td>
<td class="number">test value 7</td>
</tr>
<tr id="thirdRow">
<td> TEST DATA</td>
<td class="number">test value 8</td>
<td class="number">test value 9</td>
<td class="number">test value 10</td>
</tr>
</table>
</div>
</form>
</body>
//StyleSheet
body
{
background-color : white;
SCROLLBAR-FACE-COLOR : #dddddd;
SCROLLBAR-HIGHLIGHT-COLOR : #8F8F8F;
SCROLLBAR-SHADOW-COLOR : #8F8F8F;
SCROLLBAR-3DLIGHT-COLOR : #CCCCCC;
SCROLLBAR-ARROW-COLOR : #333333;
SCROLLBAR-DARKSHADOW-COLOR : #CCCCCC;
SCROLLBAR-BASE-COLOR : #333333;
}
.tblMain
{
border-style:solid;
border-color:Gray;
font-family:Arial;
font-size:small;
}
.topHeader {
background-color : #09385D;
FONT-FAMILY : Arial,Helvetica,sans-serif;
FONT-SIZE : 13PX;
COLOR : #ffffff;
FONT-STYLE : normal;
padding-right: 15px;
}
.heading {
FONT-FAMILY : Arial,Helvetica,sans-serif;
FONT-SIZE : 14px;
COLOR: #85000c;
FONT-STYLE: normal;
font-weight : bold;
}
.tblBorder {
border : 1px solid #D7D7D7;
padding : 3px;
background-color:#ffffff;
}
.tblBg {
background-color: #1A58A3;
FONT-FAMILY : Arial,Helvetica,sans-serif;
COLOR: #ffffff;
FONT-STYLE: normal;
font-weight: lighter;
FONT-SIZE : 12PX;
}