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) 💖
ruclips.net/user/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

[@enkiimuto1041]

You're such a good teacher that I don't even need to do this on css but i watched it anyway.
PS: good music on the intro

[@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.

[@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.

[@JustMe-zu2ml]

Very cool. Thanks Andrew!

[@shubhamambhore7207]

Thanks for all the helpful information 😍

[@Levendo]

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

[@user-zl6zm9xe5b]

Great video and explanation. Thanks

[@tanaysurya]

This was helpful!

[@IAmOxidised7525]

Man you are a life saver

[@NedumEze]

Amazing creativity. Thanks Andy

[@FollowAndrew]

My pleasure!

[@wtdosama]

You are the best for me thanks

[@vishaljaiswal5346]

Really helpful

[@GerritforBazeja]

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

[@pazir_r]

thank you

[@aerkain]

good work

[@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

[@user-hc3cn8jw1o]

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

[@DeepakNegiSunny]

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

[@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!

[@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)

[@edsonperycles5581]

How would we do this in React ?

[@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

[@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

[@MateStier-hd4nv]

Can i get the code?:)

[@jeweltalukder3296]

source code?

[@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....