[thelist] javascript for expand/collapse list (aka tree view)

Egor Kloos studio at dutchcelt.nl
Tue Aug 12 16:24:48 CDT 2003


> I am looking for some JavaScript for an expandable/collapsible "tree 
> view" list (i.e. an unordered list in HTML).
I've made one for my site, it's actually very easy to make.

> and using childNodes and parentNodes to do the hiding/showing of the 
> list;
And you don't need to use anything fancy like childNodes. CSS comes to 
the rescue!
This works almost every browser I've tested it in.

this is your script:

function toggleList(e){
	element = document.getElementById(e).style;
	element.display == 'none' ? element.display = 'block' : 

this is your HTML list:

<p>List title <a href="javascript:toggleList('idname')">[+/-]</a></p>
<ul id="idname" style="display:block">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>

See how the hyperlink uses javascript and it refers to the ID of the 
<ul>. This will tell the the script to 'remove' the <ul> when it's 
visible or to put it back. Also remember each <ul> you use must have a 
unique ID.

hope it helps,

Egor Kloos

DutchCelt Design
C. Egor Kloos
Soetensteeg 46
3011 GS  Rotterdam
tel.: 0031 (0)10 - 40 49 079
Mobile: 0031 (0)6 - 48 95 38 21


De in dit emailbericht verstrekte informatie is vertrouwelijk en 
uitsluitend bestemd voor de geadresseerde. Het kopieren van of 
verstrekken aan en gebruik door derden van deze informatie is niet 
toegestaan. Door de elektronische verzending van dit bericht kunnen er 
geen rechten worden ontleend aan de informatie.
Dit emailbericht is gecontroleerd op aanwezigheid van computervirussen.

This email and any files transmitted with it are confidential and 
intended solely for the use of the individual or entity to whom they 
are addressed. If you have received this email in error please notify 
it to the sender.
This footnote also confirms that this email message has been swept for 
the presence of computer viruses.

More information about the thelist mailing list