Webpage Workshop: Home » Articles » Collapsible Lists

Collapsible Lists

By Kae Verens

This article is about a very simple method to write collapsible lists that work in every browser. By "work", I do not mean that the lists will collapse in every browser, but that in browsers with the right capability, they will, and in browsers without the ability, they will be simply expanded.

I have always had a problem with large scripts, and almost every DHTML effect I have seen online was accompanied by huge scripts designed to cater for the most obscure configurations on browsers - detecting whether the browser is IE, Netscape, or Opera, for example. Usually, these scripts are broken easily in every browser by simply turning JavaScript off.

The method I subscribe to, though, is to design as if for non-JavaScript browsers, then add your JavaScript as an addendum - an afterthought.

Example

Let's say you had a huge list of options that you wished your visitor to pick from. The list was broken into categories. Let's say the example was a questionnaire and you had to select what kind of website your own site was. A short part of the list might be:

  • Hobbies
    • Contact Juggling
    • Juggling
    • Magic
    • Skateboards
  • Arts
    • Mime
    • Painting
    • Poetry
    • Sculpture

This, on it's own, is quite large for a single question, and it's only two subjects of a possible load.

The simple solution is to collapse the list where possible, allowing the reader to navigate the list much more easily:

  • [+]Hobbies
    • Contact Juggling
    • Juggling
    • Magic
    • Skateboards
  • [+]Arts
    • Mime
    • Painting
    • Poetry
    • Sculpture

In the above example, a non-JavaScript (or non-DOM) browser will show the expanded list, but a compliant browser will collapse the list into an easily navigable tree. In either case, there will be the '[+]' - there is a way around that, but it's beyond the scope of this short article.

How Does It Work

How does it work, I hear you say? Simple. The trees are composed of an unordered list containing two other unordered lists. All we do is manipulate the 'display' property of the contained lists.

Code of a sample collapsible list might include this:

<ul>
  <li><a href="javascript:cl_expcol('ex3');">[+]</a>Arts
    <ul id="ex3">
      <li>Mime</li>
      <li>Painting</li>
      <li>Poetry</li>
      <li>Sculpture</li>
    </ul>
  </li>
</ul>

Which would then render as this:

Note that the inner <ul> is given an id, which is used in the '[+]' link. This is passed to the function cl_expcol:

var dge=document.getElementById;
function cl_expcol(a){
  if(!dge)return;
    document.getElementById(a).style.display = 
      (document.getElementById(a).style.display=='none')?
      'block':'none';
}

This code simply switches the state of the referred element between 'none' (invisible) and 'block' (visible). Easy! dge is set outside the function so that it can be used in other functions as well; it checks that the browser can handle document.getElementById calls - if it can't, then the function returns without doing anything.

How Do I Collapse All?

Obviously, the desired initial condition is that all collapsible lists begin as collapsed. There is a long way to do this, and a short way. Let's take the short way - the long way can be described at some other time.

The simplest way to do this is to name every collapsible list in a linear fashion - 'ex1', 'ex2', 'ex3', etc, then write a function to run through each of these one by one until the referred to element does not exist (it runs out of collapsible lists). No sooner said than done:

function cl_colall(){
  if(!dge)return;
  for(i=1;document.getElementById('ex'+i);i++){
    document.getElementById('ex'+i).style.display='none';
  }
}

Simple place "onload='cl_colall()'" in the <body> of your document, and you're set.

Where Is This Used?

So far, I have only seen this method in use on three sites - of which I am active in all of them... in the webworks.ie site, it is part of a website questionnaire as described above. In contactjuggling.org, I use it to help organise the forum threads a bid more handily, and at kverens.contactjuggling.org, I use it in the menu (click to a second page first - JavaScript detection thing).

I hope you find this useful. Further advancements of the code that might be done include having a specified thread opened by default, "expand all" ability (for a specified tree), and more autonomic coding, but that's well beyond the scope of this small article.