Link to home
Start Free TrialLog in
Avatar of Easwaran Paramasivam
Easwaran ParamasivamFlag for India

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}&#9;  
</a>
</div>
</td>
</tr>
<tr>
<td>
&#9;<table>
&#9;<tbody>
&#9;<tr>
&#9;&#9;<td>
&#9;&#9;</td>
&#9;</tr>
&#9;<tr>
&#9;&#9;<td>
&#9;&#9;</td>
&#9;</tr>
&#9;<tr>
&#9;&#9;<td>
&#9;&#9;</td>
&#9;</tr>
&#9;</tbody>
&#9;</table>
</td>
</tr>
</tbody>
</table>



function onExpandAll()
{
&#9;var $ele = $( '.jq-expand-all-new' );
&#9;// var $anccollapsed = $('#activelist').find('tbody tr td:first div.hd a');
&#9;if( $ele.hasClass( 'addLink' ) )
&#9;{
&#9;&#9;$( "#completeHistoryTable tr" ).each( function()
&#9;&#9;{
&#9;&#9;&#9;$( this ).find( 'td:first div.hd a' ).removeClass( 'collapsed' ).addClass( "expanded" );&#9;
&#9;&#9;&#9;$( this ).find( 'td:first div.hd a' ).closest( "tr" ).next().find( "td" ).removeClass( 'closed' );
&#9;&#9;} );
&#9;&#9;$ele.removeClass( 'addLink' ).addClass( 'minusLink' );
&#9;&#9;$ele.children( ':nth-child(2)' ).text( 'Collapse All' );
&#9;}
&#9;else if( $ele.hasClass( 'minusLink' ) )
&#9;{
&#9;&#9;$( "#completeHistoryTable tr" ).each( function()
&#9;&#9;{
&#9;&#9;&#9;$( this ).find( 'td:first div.hd a' ).removeClass( 'expanded' ).addClass( "collapsed" );
&#9;&#9;&#9;$( this ).find( 'td:first div.hd a' ).closest( "tr" ).next().find( "td" ).addClass( 'closed' );
&#9;&#9;} );
&#9;&#9;$ele.removeClass( 'minusLink' ).addClass( 'addLink' );
&#9;&#9;$ele.children( ':nth-child(2)' ).text( 'Expand All' );
&#9;}
}

However when i try to expand the individual rows , unable to achieve the expand functionality. not sure where am I missing .

please help.

Thanks
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

I have the below script that works perfectly for expanding all rows at a time.

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?
Avatar of Easwaran Paramasivam

ASKER

Adding the sample table template for clear understanding
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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