Tree structure view using ul li with icons D Note see a large view of icons available see icon example https notebook xbdev net index php page icons2 link rel stylesheet href https maxcdn bootstrapcdn com font awesome 4 4 0 css font awesome min css style ul list style none margin left 0 padding left 0 ul ul Add a margin for any ul inside another ul margin left 2em style ul li i class fa fa folder open i Project ul li i class fa fa folder open i Opened Folder span 15kb span ul li i class fa fa folder open i css ul li i class fa fa code i CSS Files span 3kb span li ul li li i class fa fa folder i Folder close span 10kb span li li i class fab fa html5 i index html li li i class fa fa picture o i favicon ico li ul li li i class fa fa folder i Folder close span 420kb span li ul li ul br br link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 5 15 3 css all min css style body min height 300px haschildren cursor pointer ul list style none margin left 0 padding left 0 ul ul Add a margin for any ul inside another ul margin left 2em ul ul display none style Click on folders with to expand ul li i class fa fa folder i Project ul li i class fa fa folder i Opened Folder span 15kb span ul li i class fa fa folder i CSS Files ul li i class fa fa code i css file span 3kb span li ul li li i class fa fa folder i Folder close span 10kb span li li i class far fa file i index html li li i class far fa file alt i test txt li li i class far fa file image i favicon ico li ul li li i class fa fa folder i Folder Edits span 420kb span ul li i class fas fa edit i Edit 1 li li i class fas fa edit i Edit 2 li ul li ul ul li ul script let coll document getElementsByTagName i for let i 0 i coll length i if coll i parentElement getElementsByTagName UL 0 continue coll i classList add fa folder plus coll i addEventListener click function e e stopPropagation e target classList toggle fa folder open var elem e target parentElement getElementsByTagName UL 0 if elem return elem elem style elem display elem display block block none console log ready script link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 5 15 3 css all min css style body min height 300px haschildren cursor pointer ul list style none margin left 0 padding left 0 ul ul Add a margin for any ul inside another ul margin left 2em ul ul display none style div id root div script let root document getElementById root function addUL item foldername let ul document createElement ul item appendChild ul return ul function addLI level filename let li document createElement li let icon document createElement i icon classList add fa icon classList add fa file li appendChild icon li appendChild document createElement span li children 1 innerHTML filename level appendChild li return li let l0 addLI addUL root test1 let l2 addLI addUL l0 test2 let l3 addLI l2 test3 let l7 addLI addUL l2 test7 let l8 addLI l7 test8 let l9 addLI l7 test9 let i4 addLI l0 test4 let coll document getElementsByTagName i for let i 0 i coll length i if coll i parentElement getElementsByTagName UL 0 continue coll i classList add fa folder plus coll i addEventListener click function e e stopPropagation e target classList toggle fa folder open var elem e target parentElement getElementsByTagName UL 0 if elem return elem elem style elem display elem display block block none console log ready script link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 5 15 3 css all min css style body min height 300px haschildren cursor pointer ul list style none margin left 0 padding left 0 ul ul Add a margin for any ul inside another ul margin left 2em ul ul display none style div id root div script let root document getElementById root function addFolder parent name let div document createElement div let top document createElement div let bot document createElement div div appendChild top div appendChild bot parent appendChild div let icon document createElement i icon classList add fa icon classList add fa folder icon classList add folder top appendChild icon top appendChild document createElement span top children 1 innerHTML name bot style margin left 20px return bot function addItem parent name let div document createElement div let icon document createElement i icon classList add fa icon classList add fa file div appendChild icon div appendChild document createElement span div children 1 innerHTML name parent appendChild div return div let b0 addFolder root Base let b1 addFolder root Files let b2 addFolder root Notes addItem b0 Simple let g addItem b0 txt file let b3 addFolder g TXT Folder let g1 addItem b3 aa let g2 addItem b3 bb let coll document getElementsByClassName folder for let i 0 i coll length i if coll i parentElement parentElement children 1 children length 0 continue let ic coll i parentElement parentElement children 0 children 0 console log ic ic classList add fa folder plus coll i addEventListener click function e e stopPropagation e target classList toggle fa folder open let divcont e target parentElement parentElement divcont children 0 children 0 classList toggle fa folder open var elem divcont children 1 console log elem if elem return elem elem style if elem display elem display block elem display elem display block block none console log ready script
document createElement i icon classList add fa icon classList add fa file li appendChild icon li appendChild document createElement span li children 1 innerHTML filename level appendChild li return li let l0 addLI addUL root test1 let l2 addLI addUL l0 test2 let l3 addLI l2 test3 let l7 addLI addUL l2 test7 let l8 addLI l7 test8 let l9 addLI l7 test9 let i4 addLI l0 test4 let coll document getElementsByTagName i for let i 0 i coll length i if coll i parentElement getElementsByTagName UL 0 continue coll i classList add fa folder plus coll i addEventListener click function e e stopPropagation e target classList toggle fa folder open var elem e target parentElement getElementsByTagName UL 0 if elem return elem elem style elem display elem display block block none console log ready script link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 5 15 3 css all min css style body min height 300px haschildren cursor pointer ul list style none margin left 0 padding left 0 ul ul Add a margin for any ul inside another ul margin left 2em ul ul display none style div id root div script let root document getElementById root function addFolder parent name let div document createElement div let top document createElement div let bot document createElement div div appendChild top div appendChild bot parent appendChild div let icon document createElement i icon classList add fa icon classList add fa folder icon classList add folder top appendChild icon top appendChild document createElement span top children 1 innerHTML name bot style margin left 20px return bot function addItem parent name let div document createElement div let icon document createElement i icon classList add fa icon classList add fa file div appendChild icon div appendChild document createElement span div children 1 innerHTML name parent appendChild div return div let b0 addFolder root Base let b1 addFolder root Files let b2 addFolder root Notes addItem b0 Simple let g addItem b0 txt file let b3 addFolder g TXT Folder let g1 addItem b3 aa let g2 addItem b3 bb let coll document getElementsByClassName folder for let i 0 i coll length i if coll i parentElement parentElement children 1 children length 0 continue let ic coll i parentElement parentElement children 0 children 0 console log ic ic classList add fa folder plus coll i addEventListener click function e e stopPropagation e target classList toggle fa folder open let divcont e target parentElement parentElement divcont children 0 children 0 classList toggle fa folder open var elem divcont children 1 console log elem if elem return elem elem style if elem display elem display block elem display elem display block block none console log ready script