CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

This is a follow-up to one of my most popular posts, which I have been planning for quite some time. So, here it is – the new CSS3-only driven treeview, with updated looks and support for selection of nested nodes. And 5 lines of optional JavaScript in case you would like to use the checkbox nested nodes selection.

css3-treeview-with-multiple-node-selection

On this page you will find a working example, as well as the HTML,  CSS3 and JavaScript source code listing.

The solution is CSS3-heavy, and has been tested on Firefox, Chrome, Opera and Internet Explorer 9+. In case you are interested in other atypical uses of checkboxes and radio buttons for building of interactive UI widgets, you may want to check this post.

Related Posts and Links

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov