Easwaran Paramasivam
asked on
Expand & Collapse Table Jquery
Team,
I want to perform 2 separate actions.
1. expand n collapse a table rows
2. expand a row in a table
I have the below script that works perfectly for expanding all rows at a time.
click on the div tag:
<div class="txtr mb">
<a href="javascript:void(0)" class="jq-expand-all-new addLink" onclick="onExpandAll();">
<span class="icon"></span>
<span>Expand All</span>
</a>
</div>
table:
<table>
<th>
</th>
<tbody>
<tr>
<td>
<div id="plan${count.count}" class="hd">
<a class="collapsed rel" href="javascript:void(0);" ><span class="icon"> </span>
${plan.description}	
</a>
</div>
</td>
</tr>
<tr>
<td>
	<table>
	<tbody>
	<tr>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
	</tbody>
	</table>
</td>
</tr>
</tbody>
</table>
function onExpandAll()
{
	var $ele = $( '.jq-expand-all-new' );
	// var $anccollapsed = $('#activelist').find('tbo dy tr td:first div.hd a');
	if( $ele.hasClass( 'addLink' ) )
	{
		$( "#completeHistoryTable tr" ).each( function()
		{
			$( this ).find( 'td:first div.hd a' ).removeClass( 'collapsed' ).addClass( "expanded" );	
			$( this ).find( 'td:first div.hd a' ).closest( "tr" ).next().find( "td" ).removeClass( 'closed' );
		} );
		$ele.removeClass( 'addLink' ).addClass( 'minusLink' );
		$ele.children( ':nth-child(2)' ).text( 'Collapse All' );
	}
	else if( $ele.hasClass( 'minusLink' ) )
	{
		$( "#completeHistoryTable tr" ).each( function()
		{
			$( this ).find( 'td:first div.hd a' ).removeClass( 'expanded' ).addClass( "collapsed" );
			$( this ).find( 'td:first div.hd a' ).closest( "tr" ).next().find( "td" ).addClass( 'closed' );
		} );
		$ele.removeClass( 'minusLink' ).addClass( 'addLink' );
		$ele.children( ':nth-child(2)' ).text( 'Expand All' );
	}
}
However when i try to expand the individual rows , unable to achieve the expand functionality. not sure where am I missing .
please help.
Thanks
I want to perform 2 separate actions.
1. expand n collapse a table rows
2. expand a row in a table
I have the below script that works perfectly for expanding all rows at a time.
click on the div tag:
<div class="txtr mb">
<a href="javascript:void(0)" class="jq-expand-all-new addLink" onclick="onExpandAll();">
<span class="icon"></span>
<span>Expand All</span>
</a>
</div>
table:
<table>
<th>
</th>
<tbody>
<tr>
<td>
<div id="plan${count.count}" class="hd">
<a class="collapsed rel" href="javascript:void(0);"
${plan.description}	
</a>
</div>
</td>
</tr>
<tr>
<td>
	<table>
	<tbody>
	<tr>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
	</tbody>
	</table>
</td>
</tr>
</tbody>
</table>
function onExpandAll()
{
	var $ele = $( '.jq-expand-all-new' );
	// var $anccollapsed = $('#activelist').find('tbo
	if( $ele.hasClass( 'addLink' ) )
	{
		$( "#completeHistoryTable tr" ).each( function()
		{
			$( this ).find( 'td:first div.hd a' ).removeClass( 'collapsed' ).addClass( "expanded" );	
			$( this ).find( 'td:first div.hd a' ).closest( "tr" ).next().find( "td" ).removeClass( 'closed' );
		} );
		$ele.removeClass( 'addLink' ).addClass( 'minusLink' );
		$ele.children( ':nth-child(2)' ).text( 'Collapse All' );
	}
	else if( $ele.hasClass( 'minusLink' ) )
	{
		$( "#completeHistoryTable tr" ).each( function()
		{
			$( this ).find( 'td:first div.hd a' ).removeClass( 'expanded' ).addClass( "collapsed" );
			$( this ).find( 'td:first div.hd a' ).closest( "tr" ).next().find( "td" ).addClass( 'closed' );
		} );
		$ele.removeClass( 'minusLink' ).addClass( 'addLink' );
		$ele.children( ':nth-child(2)' ).text( 'Expand All' );
	}
}
However when i try to expand the individual rows , unable to achieve the expand functionality. not sure where am I missing .
please help.
Thanks
ASKER
Adding the sample table template for clear understanding
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi there,
Thanks for your tip on validator check. my table structure got passed on W3c standards.
However there was a JS file import was missing as part of the check. The import was working fine with my local and dev stream was not working and later i fixed the relative path.
Thanks for your help.
Thanks Experts admin team for your support
Regards,
Easwar
Thanks for your tip on validator check. my table structure got passed on W3c standards.
However there was a JS file import was missing as part of the check. The import was working fine with my local and dev stream was not working and later i fixed the relative path.
Thanks for your help.
Thanks Experts admin team for your support
Regards,
Easwar
If you say so. Kind of difficult to test without the css definitions for expanded, collapsed, addLink, minusLink, hd, closed, etc. The table has no content or classes so it has no height to expand into.
Assuming all this is in place, what will trigger the expanding of individual rows?