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.

enter image description here

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

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -