style clt clt ul clt li position relative clt ul list style none padding left 32px clt li before clt li after content position absolute left 12px clt li before border top 1px solid 000 top 9px width 8px height 0 clt li after border left 1px solid 000 height 100 width 0px top 2px clt ul li last child after height 8px style div class clt ul li Fruit ul li Red ul li Cherry li li Strawberry li ul li li Yellow ul li Banana li ul li ul li li Meat ul li Beef li li Pork li ul li ul div script src https cdnjs cloudflare com ajax libs jquery 3 6 3 jquery min js script script li ul hide li click function console log this console log clicked this children ul slideToggle medium this toggleClass treeview folder this find ul first toggle medium if this attr className treeview folder return event stopPropagation make sure the li onclick isn t fired treeview li span click function event console log text event stopPropagation make sure the li onclick isn t fired script link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 5 15 3 css all min css style clt clt ul clt li position relative clt ul list style none padding left 16px clt li before clt li after content position absolute left 8px clt li before border top 1px solid 000 top 9px width 6px height 0 clt li after border left 1px solid 000 height 100 width 0px top 2px clt ul li last child after height 8px fa folder cursor pointer color orange fa filed color white style div class clt ul li i class fa fa folder i Fruit ul li i class fa fa folder i Red ul li i class far fa file i Cherry li li i class far fa file i Strawberry li ul li li i class fa fa folder i Yellow ul li i class far fa file i Banana li ul li ul li li i class fa fa folder i Meat ul li i class far fa file i Beef li li i class far fa file i Pork li ul li ul div script src https cdnjs cloudflare com ajax libs jquery 3 6 3 jquery min js script script li ul hide li click function console log this console log clicked this children ul slideToggle medium this toggleClass treeview folder this find ul first toggle medium if this attr className treeview folder return event stopPropagation make sure the li onclick isn t fired treeview li span click function event console log text event stopPropagation make sure the li onclick isn t fired script
clt li before clt li after content position absolute left 8px clt li before border top 1px solid 000 top 9px width 6px height 0 clt li after border left 1px solid 000 height 100 width 0px top 2px clt ul li last child after height 8px fa folder cursor pointer color orange fa filed color white style div class clt ul li i class fa fa folder i Fruit ul li i class fa fa folder i Red ul li i class far fa file i Cherry li li i class far fa file i Strawberry li ul li li i class fa fa folder i Yellow ul li i class far fa file i Banana li ul li ul li li i class fa fa folder i Meat ul li i class far fa file i Beef li li i class far fa file i Pork li ul li ul div script src https cdnjs cloudflare com ajax libs jquery 3 6 3 jquery min js script script li ul hide li click function console log this console log clicked this children ul slideToggle medium this toggleClass treeview folder this find ul first toggle medium if this attr className treeview folder return event stopPropagation make sure the li onclick isn t fired treeview li span click function event console log text event stopPropagation make sure the li onclick isn t fired script