Pure CSS tree view with custom tree icons

In this tutorial we'll be creating a pure CSS solution to implement a tree view structure. This is a very common structure and typically requires javascript in order to fully complete. In this CSS only solution we'll have customizable tree icons, use pseudo elements for the 'tier' legs and arms along with several tricks along the way!
💖 SUBSCRIBE (Please) 💖
ua-cam.com/users/FollowAndrew?s...
🔗 Links 🔗
Pseudo Elements Tutorial: • Before & After CSS Pse...
CSS Positioning: • CSS Positioning Tutori...
⌚Timestamps⌚
00:00 Intro
00:01 Setting up the HTML
05:05 The magic of details & summary
12:30 Adding the styles for the arms and legs with pseudo elements
23:30 Setting up custom icons for the collapsed and open states
31:26 Reminding you to SUBSCRIBE ALREADY
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #html #treeview

[@ayushkushwaha171]

I had this same scenario come into my work today, your tutorial really helped, thanks Andrew!

[@hulooloo]

The perfet tutorial I'v search for tree UI! Thanks Andrew.

[@tri5431]

Thanks so much ! I needed an additional line in the css, summary {list-style: none;}, to make the disclosure triangle go away, but otherwise, worked like a charm. Very much appreciated.

[@JustMe-zu2ml]

Very cool. Thanks Andrew!

[@shubhamambhore7207]

Thanks for all the helpful information 😍

[@user-zl6zm9xe5b]

Great video and explanation. Thanks

[@NedumEze]

Amazing creativity. Thanks Andy

[@FollowAndrew]

My pleasure!

[@Levendo]

This video helped me a great deal. Thanks a lot, good sir.

[@tanaysurya]

This was helpful!

[@wtdosama]

You are the best for me thanks

[@IAmOxidised7525]

Man you are a life saver

[@vishaljaiswal5346]

Really helpful

[@user-xn3kw9qi5j]

thank you

[@aerkain]

good work

[@user-hc3cn8jw1o]

How well does this approach support screen-readers and accessibility?

[@GerritforBazeja]

Thank you for the nice video, again and your calm way of explaining. Can you make it also suitable for mobile.

[@DeepakNegiSunny]

Hello sir, is there any way we can make that recursive by note repeating the template (li), which repeats itself until last child 😊

[@antonbrianfejervilchez3507]

great video!

[@FollowAndrew]

Thanks!

[@NedumEze]

Sorry Andy, did you forget to make the code available for download? I'll be helpful if you do

[@edsonperycles5581]

How would we do this in React ?

[@abidrahim7607]

This. is. amazing. I would have gone the hard way with JavaScript, but this is so so much better. Thank you sir!

[@abidrahim7607]

Subb'd

[@FollowAndrew]

Nice!

[@balex259]

Can you share the code from intro?

[@blackguy-ij7ij]

Is this ada friendly?

[@anonimus11236]

Source code? I cant get rid of the summery::marker

[@kajalmondal9745]

Please upload regularly sir. Miss your videos

[@FollowAndrew]

I do plan on more regular uploads!

[@wtdosama]

We need more full website with css grid (grid-template-areas)

[@MateStier-hd4nv]

Can i get the code?:)

[@jeweltalukder3296]

source code?

[@rayyanabdulwajid7681]

I have done this without css checkbox or javascript using only html details and summary

[@stevecarter8810]

Including the lines and icons?

[@wikituby]

source code please

[@brotinbiswas8348]

This is amazing and so simple. I like it....👍👍👍👍
But one thing :- Turn off the default triangle " details summary::-webkit-details-marker { display:none; }" didn't work for me.
I believe the following approaches will work.
ul summary::marker {
content: none;
}

[@josevelez6865]

I found this also worked:
.tree summary{
list-style: none;
}

[@Gyannea]

I had the same issue. But the content:none; worked. Disturbing for standardization. I am using the latest Chrome browser, too.

[@Kennerdoll]

same here

[@ai_serf]

MDN is pretty bad too. the documentation on summary doesn't cover this....