Pure CSS tree view with custom tree icons

[@nhatle2601]

Thank you very very much, I get stuck in dealing with this task until I watch your guide.
Really appreciated. Thank you again

[@abbastough9474]

Wow! Thanks for the priceless tutorial.
I thought I would be getting it done with JS until I watched your video.

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

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

[@hulooloo]

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

[@Levendo]

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

[@IAmOxidised7525]

Man you are a life saver

[@BrockWhitaker-c4w]

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

[@NedumEze]

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

[@JustMe-zu2ml]

Very cool. Thanks Andrew!

[@NedumEze]

Amazing creativity. Thanks Andy

[@FollowAndrew]

My pleasure!

[@shubhamambhore7207]

Thanks for all the helpful information 😍

[@LuisAlfredoGuzmanMoreno]

Great video and explanation. Thanks

[@GerritforBazeja]

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

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

[@blackguy-ij7ij]

Is this ada friendly?

[@DeepakNegiSunny]

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

[@tanaysurya]

This was helpful!

[@vishaljaiswal5346]

Really helpful

[@edsonperycles5581]

How would we do this in React ?

[@wtdosama]

You are the best for me thanks

[@anonimus11236]

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

[@balex259]

Can you share the code from intro?

[@aerkain]

good work

[@pazir_r]

thank you

[@kajalmondal9745]

Please upload regularly sir. Miss your videos

[@FollowAndrew]

I do plan on more regular uploads!

[@antonbrianfejervilchez3507]

great video!

[@FollowAndrew]

Thanks!

[@wikituby]

source code please

[@wtdosama]

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

[@jeweltalukder3296]

source code?

[@MateStier-hd4nv]

Can i get the 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....

[@rayyanabdulwajid7681]

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

[@stevecarter8810]

Including the lines and icons?

[@alexander499zero]

source code????