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 from a database (I can do this part), so basically it will go like this:

+Category1
+Category2
+Category3
+Category4

When the user clicks on +, it will show the below till the data is grabbed from DB and added to the page:

+Category1
-Category2
    loading ...
+Category3
+Category4

After the data is loaded, each sub-category WILL have sub-sub-category.

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

How can I achieve this?

NOTE: I want to know how to put (* or > or any other symbol for the list, I believe this is CSS but I don't work with design at all!!)

Your help is really appreciated.

Answer 1

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.

Answer 2

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.