jquery - How to initially collapse expandable table rows -
i have expanding table row working there 2 things im not sure of
<!doctype html> <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <body> <table> <tr class="parent" id="row123"> <td>people</td> <td>click expand</td> <td>n/a</td> </tr> <tr class="child-row123"> <td>eve</td> <td>jackson</td> <td>94</td> </tr> <tr class="child-row123"> <td>john</td> <td>doe</td> <td>80</td> </tr> </table> <script> $(function() { $('tr.parent') .css("cursor","pointer") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); }); $('tr[@class^=child-]').hide().children('td'); }); </script> </body> </html> - how ensure collapse rows @ beginning
- how perform slidetoggle effect when have tried using odd results.
thanks,
this
$('tr[@class^=child-]').hide().children('td'); should this:
$('tr[class^=child-]').children('td').hide(); note removed @.
for slidetoggle, use div instead of table elements, notoriously troublesome in animations:
<td><div>people</div></td> $('tr.parent') .css("cursor", "pointer") .click(function () { $(this).siblings().find('td > div').slidetoggle(); }); $('tr[class^=child-]').children('td').children('div').hide(); the selectors little more complicated multiple child rows:
$('tr.parent') .css("cursor", "pointer") .click(function () { // slide divs in sibling rows $(this).siblings('tr[class^=child-]').find('div').slideup(); // define children trailing, sequential rows 'child-' class var $children = $(this).nextuntil( $('tr').not('[class^=child-]') ); // toggle $children.find('td > div').slidetoggle(); }); // hide child rows (could done css) $('tr[class^=child-]').find('td > div').hide();
Comments
Post a Comment