Ordinary file list view ol li class file a href document pdf File 1 a li li label for subfolder1 Subfolder 1 label input type checkbox id subfolder1 ol li class file a href File 1 a li li class file a href File 2 a li li class file a href File 3 a li ol li ol Tree Hierarchy File View Pure CSS Collapsable Feature Collapse feature uses checkbox when checked unchecked it expands collapses fontawesome to add icon to the item e g folder or png link rel stylesheet href https use fontawesome com releases v5 7 1 css all css style Just some base styles not needed for example to function html font family Verdana Arial Helvetica sans serif margin 0 padding 0 body height 400px background color 606061 color ffffff margin 0 html font size 100 IE hack body font size 1em Sets base font size to 16px table font size 100 IE hack input select textarea th td font size 1em CSS Tree menu styles ol tree padding 0 0 0 10px width 300px li position relative margin left 15px list style none li file margin left 1px important li file a color fff padding left 21px text decoration none display block li file a before font family Font Awesome 5 Free font weight 900 content f15c 00a0 li file a href pdf before font family Font Awesome 5 Free content f1c1 00a0 li file a href html before font family Font Awesome 5 Free content f1c4 00a0 li file a href css before font family Font Awesome 5 Free content f15b 00a0 li file a href js before font family Font Awesome 5 Free content f1c5 00a0 li input position absolute left 0 margin left 0 opacity 0 z index 2 cursor pointer height 1em width 1em top 0 li input ol margin 0 938em 0 0 44px xdisplay block height 1em li input ol li height 0 overflow hidden margin left 14px important padding left 1px li label cursor pointer display block padding left 37px li label before font family Font Awesome 5 Free content f07b 00a0 folder icon li input checked ol margin 1 25em 0 0 44px padding 1 563em 0 0 80px height auto li input checked ol before font size small position absolute left 12px top 2px content margin 1 25em 0 0 44px padding 1 563em 0 0 80px height auto li input ol before font size small position absolute left 12px top 2px content margin 1 25em 0 0 44px padding 1 563em 0 0 80px height auto li input checked ol li height auto margin 0 0 0 125em 2px li input checked ol li last child margin 0 0 0 063em 1px style ol class tree li label for folder1 Folder 1 label input type checkbox checked id folder1 ol li class file a href document pdf File 1 a li li label for subfolder1 Subfolder 1 label input type checkbox id subfolder1 ol li class file a href cat html Filey 1 a li li label for subsubfolder1 Subfolder 1 label input type checkbox id subsubfolder1 ol li class file a href File 1 a li li label for subsubfolder2 Subfolder 1 label input type checkbox id subsubfolder2 ol li class file a href test txt Subfile 1 a li li class file a href test css Subfile 2 a li li class file a href test js Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li li class file a href File 3 a li li class file a href File 4 a li li class file a href File 5 a li li class file a href File 6 a li ol li ol li li label for folder2 Folder 2 label input type checkbox id folder2 ol li class file a href File 1 a li li label for subfolder2 Subfolder 1 label input type checkbox id subfolder2 ol li class file a href Subfile 1 a li li class file a href Subfile 2 a li li class file a href Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li li label for folder3 Folder 3 label input type checkbox id folder3 ol li class file a href File 1 a li li label for subfolder3 Subfolder 1 label input type checkbox id subfolder3 ol li class file a href Subfile 1 a li li class file a href Subfile 2 a li li class file a href Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li li label for folder4 Folder 4 label input type checkbox id folder4 ol li class file a href File 1 a li li label for subfolder4 Subfolder 1 label input type checkbox id subfolder4 ol li class file a href Subfile 1 a li li class file a href Subfile 2 a li li class file a href Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li li label for folder5 Folder 5 label input type checkbox id folder5 ol li class file a href File 1 a li li label for subfolder5 Subfolder 1 label input type checkbox id subfolder5 ol li class file a href Subfile 1 a li li class file a href Subfile 2 a li li class file a href Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li ol style body background white font normal normal 13px 1 4 Segoe Segoe UI Calibri Helmet FreeSans Sans Serif padding 50px Framework starts from here tree tree ul margin 0 0 0 1em indentation padding 0 list style none color 369 position relative tree ul margin left 5em indentation 2 tree before tree ul before content display block width 0 position absolute top 0 bottom 0 left 0 border left 1px solid tree li margin 0 padding 0 1 5em indentation 5em line height 2em default list item s line height font weight bold position relative tree li before content display block width 10px same with indentation height 0 border top 1px solid margin top 1px border top width position absolute top 1em line height 2 left 0 tree li last child before background white same with body background height auto top 1em line height 2 bottom 0 style div p Caption Here p ul class tree li Animals ul li Birds li li Mammals ul li Elephant li li Mouse li ul li li Reptiles li ul li li Plants ul li Flowers ul li Rose li li Tulip ul li List item 1 li li List item 2 ul li List item 2 1 li li List item 2 2 li li List item 2 3 li ul li li List item 3 li li List item 4 li li List item 5 ul li List item 5 1 li li List item 5 2 ul li List item 5 2 1 li li List item 5 2 2 li li List item 5 2 3 li li List item 5 2 4 li ul li ul li li List item 6 li li List item 7 li li List item 8 li ul li ul li li Trees li ul li ul div link rel stylesheet href https use fontawesome com releases v5 7 1 css all css style body min height 400px font size 1rem background f5f5f5 h tree position relative background white margin top 20px padding 30px font family Roboto Mono monospace font size 85rem font weight 400 line height 1 5 color 212529 tree span font size 13px font style italic letter spacing 4px color a8a8a8 tree fa folder open fa folder color 007bff tree fa html5 color f21f10 tree ul padding left 5px list style none tree ul li position relative padding top 5px padding bottom 5px padding left 15px webkit box sizing border box moz box sizing border box box sizing border box tree ul li before position absolute top 15px left 0 width 10px height 1px margin auto content background color 666 tree ul li after position absolute top 0 bottom 0 left 0 width 1px height 100 content background color 666 tree ul li last child after height 15px tree a cursor pointer tree hover text decoration none style div class tree 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 div
ol li class file a href File 1 a li li label for subfolder4 Subfolder 1 label input type checkbox id subfolder4 ol li class file a href Subfile 1 a li li class file a href Subfile 2 a li li class file a href Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li li label for folder5 Folder 5 label input type checkbox id folder5 ol li class file a href File 1 a li li label for subfolder5 Subfolder 1 label input type checkbox id subfolder5 ol li class file a href Subfile 1 a li li class file a href Subfile 2 a li li class file a href Subfile 3 a li li class file a href Subfile 4 a li li class file a href Subfile 5 a li li class file a href Subfile 6 a li ol li ol li ol style body background white font normal normal 13px 1 4 Segoe Segoe UI Calibri Helmet FreeSans Sans Serif padding 50px Framework starts from here tree tree ul margin 0 0 0 1em indentation padding 0 list style none color 369 position relative tree ul margin left 5em indentation 2 tree before tree ul before content display block width 0 position absolute top 0 bottom 0 left 0 border left 1px solid tree li margin 0 padding 0 1 5em indentation 5em line height 2em default list item s line height font weight bold position relative tree li before content display block width 10px same with indentation height 0 border top 1px solid margin top 1px border top width position absolute top 1em line height 2 left 0 tree li last child before background white same with body background height auto top 1em line height 2 bottom 0 style div p Caption Here p ul class tree li Animals ul li Birds li li Mammals ul li Elephant li li Mouse li ul li li Reptiles li ul li li Plants ul li Flowers ul li Rose li li Tulip ul li List item 1 li li List item 2 ul li List item 2 1 li li List item 2 2 li li List item 2 3 li ul li li List item 3 li li List item 4 li li List item 5 ul li List item 5 1 li li List item 5 2 ul li List item 5 2 1 li li List item 5 2 2 li li List item 5 2 3 li li List item 5 2 4 li ul li ul li li List item 6 li li List item 7 li li List item 8 li ul li ul li li Trees li ul li ul div link rel stylesheet href https use fontawesome com releases v5 7 1 css all css style body min height 400px font size 1rem background f5f5f5 h tree position relative background white margin top 20px padding 30px font family Roboto Mono monospace font size 85rem font weight 400 line height 1 5 color 212529 tree span font size 13px font style italic letter spacing 4px color a8a8a8 tree fa folder open fa folder color 007bff tree fa html5 color f21f10 tree ul padding left 5px list style none tree ul li position relative padding top 5px padding bottom 5px padding left 15px webkit box sizing border box moz box sizing border box box sizing border box tree ul li before position absolute top 15px left 0 width 10px height 1px margin auto content background color 666 tree ul li after position absolute top 0 bottom 0 left 0 width 1px height 100 content background color 666 tree ul li last child after height 15px tree a cursor pointer tree hover text decoration none style div class tree 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 div