javascript - Collapasble tree using divs to hide child branches using jquery -


i have created collapasbe tree using divs, i've got working fine, part i'm having trouble is, if click on parent branch expand want rest of branchs hide , re-appear when collapse them.

- parent item - if expand -- child item - if expand --- item - , on --- item - , on -- child item - hide -- child item - hide - parent item - hide - parent item -hide 

i have working example here

https://jsfiddle.net/zidski/5dtgb91t/

i've updated example: https://jsfiddle.net/zidski/5dtgb91t/2/

i can parent child ids, trying work out how keep active branch show , hide rest.

//gets id parent - branch0 var getbranchparentid = $(this).parent().parent().parent().prop("id");  //goes through each branch in parent - branch0_0,branch0_1 etc $('#' + getbranchparentid).children().children('.branch').each(function() { var bell = $(this).attr('id');  // if branch active hide other branches, if click make not active branches should show var isactivechild = $('#'+bell).hasclass('active');  if(isactivechild){   $(this).show(); }else {   $(this).hide(); } 

});

update - working version: https://jsfiddle.net/zidski/5dtgb91t/10/

update cleanup - https://jsfiddle.net/zidski/5dtgb91t/12/


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -