Expandable Tree Menu List

Question

What I want to achieve is the following:

I want to have a tree-view list that will appear on the left side of the page, when an Item is expanded, it\'s items are loaded

Answer 1

ok, so I assume your list of items is an ul To every item, you can add a class called closed, this clase would look like this in css:

.closed:before{content:'+';}
.opened:before{content:'-';}

Then ‹ith javascript, you togle those classes. You could also add other styles to these + and - signs in the css above, to give it a border and background color.

Answer 2

Do you have any browser requirements? I have used the [CSS] Ninja example, along with selectivizr to support older versions of IE. Don't have an accessible example, apart from what is on the [CSS] Ninja site:

Pure CSS collapsible tree menu

And selectivizr:

selectivizr

The example is geared towards using it for a file navigation scenario, but you should be able to fairly easily modify it to remove the folders and file icons, should you want.