tree view list navigation

How to make a Windows explorer type tree view for links and sub links

[eerikk2]

so what i am stuck on is attempting to make a tree view navigation. I know how to make pop out menus when you scroll over using just css and html but what i want is to make a list of links that looks like this fully expanded.

Link 1
sub-link
sub-link
sub-link
sub-link
Link 2
sub-link
sub-link
sub-link
sub-link
Link 3
sub-link
sub-link
sub-link
and so on.

When the page loads i would like the sub-links to not show up. they only show up when the parent link is clicked.
if any one knows a good tutorial or could write one i would greatly appreciate it.
Thanks in advance
Erik

[jamie]

hi erik,

a simple way would be to take 3 <ul> with header divs above each one.

each of the <ul> is hidden and has a unique id, e.g. <ul style="display: none" id="list1">. the header div above when clicked changes the style attribute of the appropriate ul from display: none to display: block, e.g.

<div onclick="document.getElementById('list1').style.display = 'block'">List 1</div>
<ul style="display: none" id="list1">
<li>sub-link 1</li>
<li>sub-link 2</li>
</ul>

the above code only shows, it doesn't hide again. it would be best to wrap the javascript code in a function which checks whether the ul is hidden or not (check the value of display) and shows/hides accordingly. so everytime you click on the div it calls the function. e.g.
<div onclick=showHide('list1')">List 1</div>

hth