Minimal pure CSS Treeview with FontAwesome expanders

 

Update 2015-07-18: shux! not valid to apply ::before/after psuedo elements to <input> since it’s not technically content (stack-o reference)

 

jQuery solution:

 

 

Following solution works in Chrome and Safari but not Firefox or IE… so i guess that means i like webkit.

 

Look ma, no JavaScript! 🙂

Leveraging (hidden) checkbox element to maintain expand/collapse state and

 css to avoid extra elements.

Not an original idea but wanted to see of i could trim down all the extra html markup & css required.

The <input> is the only additional overhead above standard markup.