show/hide hyperlink list ("tree" format)

[lazywolfy]

Can somebody point me in the right direction?
I was using the code below to show/hide text but I'm in need of a more advanced code if possible. Instead of just showing simple text upon clicking the heading, I need it to show/hide a separate list of hyperlinks that in turn can also be clicked on to show another list of subheadings or text. similar to a tree but with hyperlinks. I tried searching if this question had been asked before but found nothing.

example:
Heading (click to show/hide list)
--->Subheading (click to show/hide list and/or hyperlinks)
------->Subheading (click to show/hide list and/or hyperlinks)
------->Subheading (click to show/hide list and/or hyperlinks)
--->Subheading (click to show/hide list and/or hyperlinks)
------->Subheading (click to show/hide list and/or hyperlinks)
------->Subheading (click to show/hide list and/or hyperlinks)


This is the code I'm currently using:
<script type="text/javascript"> function show_hide(the_layer) {
if(document.getElementById(the_layer)) {
if(document.getElementById(the_layer).style.display == 'none') {
document.getElementById(the_layer).style.display = 'inline'; } else {
document.getElementById(the_layer).style.display = 'none'; } } }</script><br><a
href="javascript:show_hide('foobar');">Show/hide</a><br><div style="display:
none;" id="foobar">Some text to be hidden or displayed.</div> <br />

[SouthwaterDave]

The excellent CSS play (http://www.cssplay.co.uk) site has lots of CSS based menus. One might just do the job.

[srule_]

Yes, CSSplay is a great site. In particular check out this menu:
http://www.cssplay.co.uk/menus/flyout2.html.

It seems to be what u want

[lazywolfy]

Thanks for the site..it's great! But I don't think it's quite what I'm looking for. (I should've been a bit clearer)

I would like to use the tree style format, but not as a navigational means....more as a means to display content within the same page...I hope that makes sense.
I will be using this within the body of a webpage, not as a navigational menu because we already have one, plus, my company uses Vignette Content Manager which has limitations that won't allow CSS, but will allow some java and most html.

for example:
Clerical Category (hyperlink....click on to show hidden text/hyperlinks)
--->Office Specialist (hidden hyperlink....click on to show more hidden text/hyperlinks)
------->Job Description (hidden hyperlink....click on to show more hidden text/hyperlinks)
------->Functional Role (hidden hyperlink....click on to show more hidden text/hyperlinks)
--->Admin Assistant (hyperlink....click on to show hidden text/hyperlinks)
--->Secretary (hyperlink....click on to show hidden text/hyperlinks)

very similar to this http://www.geocities.com/timdenton3000/ except it would show hyperlinks instead of hidden text.


If you know of a similar site thats meant for html that would be great!
Thanks

[Jutlander]

I think the most semantic way of marking that up would be to use a definition list, because you are going to describe the jobs. Look into the following three tags:

<dl>
<dt>
<dd>

[lazywolfy]

I looked into using the definition list tags as suggested....still no luck...any other help? please!

[lazywolfy]

I played around with my current code (see my 1st post) and came up with this:
<script type="text/javascript"> function show_hide(the_layer) { if(document.getElementById(the_layer)) { if(document.getElementById(the_layer).style.display == 'none') { document.getElementById(the_layer).style.display = 'inline'; } else { document.getElementById(the_layer).style.display = 'none'; } } }</script>
<br><a href="javascript:show_hide('ADMIN');">Clerical</a>
<br><div style="display: none;" id="ADMIN">
<a href="javascript:show_hide('LOL');" STYLE="TEXT-DECORATION: NONE">Admin Asst.</a>
<br><div style="display: none;" id="LOL">
<a href="javascript:show_hide('ROFL');" STYLE="TEXT-DECORATION: NONE">Job Description</a>
<br><div style="display: none;" id="ROFL">Some text to be hidden or displayed.
<br/>
</div><a href="javascript:show_hide('LMAO');" STYLE="TEXT-DECORATION: NONE">Functional Role</a><br><div style="display: none;" id="LMAO">Functional Role text here.</div></div></div>
<br />

I just basically copied a section of the code into itself about 2 or 3 times.
It does exactly what I need it to do and I evan added some code to remove the underlines from the subheading links....but it looks messy and I'm assuming there's a simpler way to write this code. Can somebody take a look at it for me pls and possibly tell me how to write it better?

Also, is there a way to indent the subheadings automatically to get that outline look format?

And, is it possible to add a plus sign to the headings but when expanded, it changes to a minus sign?

This is a lot to ask I know, but any help would be appreciated. Thanks

[Jutlander]

I looked into using the definition list tags as suggested....still no luck...any other help? please!

Make sure you haven't zero'ed margins and padding (which is a good idea). If that is the case, you must put your own on the list.

So this did not work out?


<dl>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
</dl>

[lazywolfy]

So this did not work out?
<dl>
<dt>Term</dt>
<dd>Description</dd>
<dt>Term</dt>
<dd>Description</dd>
</dl>

that's not exactly what I'm looking for...yes I'd like that dl look and feel, but I need the functionality of a tree menu to go along with that. Hope that makes sense.

This is what I'm currently using but I need a better way to write the code I'm using because it's causing some errors in my CMA (vignette). Thx
(each of the headings below will expand the tree (show/hide) upon being clicked on.
Clerical
Admin Asst.
Job Description
Some text to be hidden or displayed.
Functional Role
Functional Role text here.

[Jutlander]

I use this to show/hide a div. It can be modified to a definition list if needed.

Javascript:

<script language="javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>

<a href="#" onclick="showhide('div1');">Show/hide div</a>

<div id="div1">Content in div</div>

Instead of a link, you could make a button with the input element.

Then style #div1 with CSS and make sure you set the display property to 'none'.

[lazywolfy]

I tried that one but it doesn't show/hide the text...unless I'm doing something wrong. Besides i don't think the CMA i'm using will agree with the line: <a href="#" onclick="showhide('div1');">Show/hide div</a>

it's very picky....