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
Post a Comment