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.

score 9 · Answer 1 · answered Dec 14 '11 at 15:42

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.

score 5 · Answer 2 · answered Dec 14 '11 at 14:35

5

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.

answered Dec 14 '11 at 14:35

bigblind

12,539
14
68
123

is there any HTML code for this? I want it to show exactly as in the question. – sikas Dec 14 '11 at 15:02
You could prepend the - to the text in the element using for example jquery's `.text(newtext)` method when it is opened, and remove it, and switch it for a + when the section is closed again. There is no HTML to create such a tree. – bigblind Dec 14 '11 at 15:09
Frederik Creemers, I don't work with HTML, all my work is with PHP and MySQL mainly ... So I would appreciate that you provide a sample code that demonstrate it. I'm trying to find anything on google, found good examples but week tutorials!! – sikas Dec 14 '11 at 15:32

Expandable Tree Menu List

2 Answers2

Linked