Collapsible list generation controls

Collapsible lists

This script uses JavaScript to produce tree structured lists that can be collapsed. See also my nested list collapsing script which takes existing HTML nested UL or OL lists, and collapses them with JavaScript. It is not as versitile as this script as it cannot produce tree structures, but it is more accessible as JavaScript is not required to produce the uncollapsed lists.

To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.

What I wrote to define the lists

Firstly, load the script that creates and controls the lists:

<script src="collapsibleList.js" type="text/javascript"></script>

Then define the individual list:

<script type="text/javascript"">

//first create a tree object and define all images to use
var myList = new collapsibleList([17,21,'t.gif','l.gif','i.gif','e.gif'],[25,21,'f.gif','b.gif','p.gif','m.gif']);

//then create branches
//I only put the extra spaces in so you could see what I was doing
myList.sub[0]                      = new sub('List item 1'                   ,true);
myList.sub[0].sub[0]               = new sub('List item 1.1'                      );
myList.sub[0].sub[0].sub[0]        = new sub('List item 1.1.1'                    );
myList.sub[0].sub[1]               = new sub('<a href="/">List item 1.2<\/a>',true);
myList.sub[0].sub[1].sub[0]        = new sub('List item 1.2.1'                    );
myList.sub[0].sub[1].sub[1]        = new sub('List item 1.2.2'               ,true);
myList.sub[0].sub[1].sub[1].sub[0] = new sub('List item 1.2.2.1'                  );
myList.sub[0].sub[2]               = new sub('List item 1.3'                      );
myList.sub[0].sub[2].sub[0]        = new sub('List item 1.3.1'                    );
myList.sub[0].sub[3]               = new sub('List item 1.4'                      );
myList.sub[0].sub[4]               = new sub('List item 1.5'                      );
myList.sub[1]                      = new sub('List item 2'                        );
myList.sub[2]                      = new sub('List item 3'                        );
myList.sub[2].sub[0]               = new sub('List item 3.1'                      );
myList.sub[2].sub[0].sub[0]        = new sub('List item 3.1.1'                    );

//then tell the browser to create the collapsible list
createList(myList);

</script>

What the script produces in your browser

Don't like the look of this one? Check out my collapsible lists themes page ...

Internet Eplorer 4+, Mozilla and other Gecko browsers, Opera 7+, iCab, ICEbrowser, Konqeror, Safari/Chrome, OmniWeb 4.5+, NetFront 3.4+, and Tkhtml Hv3 will show:

Branches can be expanded / collapsed (not in this example) and will be initially set up as defined.

List item 1
List item 1.1
List item 1.2
List item 1.2.1
List item 1.2.2
List item 1.2.2.1
List item 1.3
List item 1.4
List item 1.5
List item 2
List item 3

Escape 5 also shows this, but is unable to expand the branches.

Netscape 4, Escape 4, Opera 6-, OmniWeb 4.2-, WebTV, some versions of iCab, NetFront 3.3- and non DHTML browsers will show:

Branches cannot be expanded / collapsed and will remain permanently expanded.

List item 1
List item 1.1
List item 1.1.1
List item 1.2
List item 1.2.1
List item 1.2.2
List item 1.2.2.1
List item 1.3
List item 1.3.1
List item 1.4
List item 1.5
List item 2
List item 3
List item 3.1
List item 3.1.1

The images used

Image	Purpose
	t.gif Branch sign
	l.gif Last branch sign
	i.gif Basic vertical line
	e.gif Blank spacer image
	f.gif Branch junction sign
	b.gif Basic horizontal line
	p.gif Plus sign
	m.gif Minus sign

How it works

The images required for the tree are calculated using a recursive function. Sections that can be collapsed are surrounded with <span style="display:;" id="A UNIQUE ID"> tags. Once the page has loaded enough for the last span to be referenced, a function checks if the display style of the last span is a string of zero length. If it is then the browser will allow us to change the display style. All images are changed as required and the styles of the spans are set to 'none' as required to collapse the branches.

To show or hide branches, the display style of the corresponding span is set to '' or 'none' respectively. The browser layout engine should take care of the rest.

Because this script lays out the list fully expanded first, then collapses it once the page has loaded, it will work in all JavaScript 1.2+ browsers, not just those that can change the display style. That way, browsers that cannot change the display style simply leave it as '', so the branches all remain constantly expanded. It might not be as neat as the collapsible list, but at least all of the content is accessible.

Themes

Of course, you can use any images you want, but I have prepared some sets of images.

Please see my collapsible lists themes page to try them and download them.

Collapsible list generation controls

Navigation

Site search

Site navigation

Details and download