html - Table row exapnd collapse jquery -
i have expand/collapse nested table structure below. here when click parent other expanded parents @ level , child must collapsed.

initially application(1) expanded, have 2 child's(image 1). when click application(2) childs of application(1) must collapsed (image 2). should applicable @ levels. find siblings , hide, except clicked one. how can this
siblings().find().not(clicked).hide(); here fiddle http://jsfiddle.net/vivekcek/rfkjc/
parent rows have class 'parent' , id='[id]'. child rows have class appending parent id class=child-[id].
$('tr.parent') .css("cursor", "pointer") .attr("title", "click expand/collapse") .click(function () { $(this).siblings('.child-' + this.id).toggle(); }); $('tr[class*=child-]').hide().children('td');
try
var $trs = $('tr.parent') .css("cursor", "pointer") .attr("title", "click expand/collapse") .click(function () { var $sibs = $(this).siblings('.child-' + this.id).toggle(); $(this).siblings().not($sibs).not('.parent').hide() }); $('tr[class*=child-]').hide().children('td'); demo: fiddle
Comments
Post a Comment