Nested list collapsing script

Navigation

Skip navigation.

Site search

Site navigation

Details and download

Nested list collapsing script

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.

Unlike my collapsible list script (note the subtle name difference), this script takes an existing nested HTML UL or OL list and collapses it. This makes the script a lot easier to use, as you hardly need to know any JavaScript. It is also a lot more accessible, as JavaScript is not required to create the list. Even CSS support is not required, as non-CSS browsers will just show an unstyled list. If the browser does support CSS, styling these lists is a lot easier than styling lists made with the collapsible list script, as the HTML structure is very simple. However, unlike the collapsible list script, this script cannot automatically produce tree structure diagrams for you (you need to use CSS as shown below), and it does not collapse in Internet Explorer 4. It also cannot change the plus/minus HTML you provide as branches are expanded or collapsed. It also collapses all branches first, none can be left open by default like they can with the collapsible list script. However, their open/close state can be saved and recovered using cookies (new in version 2), and links to the current page can also be automatically highlighted and branches can be automatically expanded to show them (new in version 2.1).

The root list item of an expanding branch (the branch heading) may also contain links - the script automatically detects this and makes the expand/collapse link just use the plus/minus HTML. Note however, that if you do use links in the branch heading, it is important that you do not use display:block for the links, or they will be broken onto two lines.

Note to Internet Explorer users on Windows: do not save copies of this page using Internet Explorer. It breaks my CSS when saving the page. Use a better browser, such as Opera.

Note to Mozilla/Firefox/Netscape users: do not save copies of this page using Mozilla Gecko based browsers. They duplicate the content generated by the script. Use a better browser, such as Opera.

This is a regular UL nested list with pretty styling using regular CSS.

All three examples should look like this in Internet Explorer 4, Netscape 4, Opera 4-6, OmniWeb 4.2, Escape 4 and 5, WebTV, NetFront 3.3- and Clue browser (with varying levels of CSS support - you could choose to use more browser friendly CSS).

This example has been collapsed using the script. Child branches will not collapse automatically when sibling branches are expanded. If you tick the following checkbox: I will use cookies to save the state of this menu when you click a link or when you refresh (assuming your browser fires onunload when you refresh - not Opera or Mozilla).

Internet Eplorer 5+, Mozilla/Firefox and other Gecko browsers, Opera 7+, ICEbrowser, Konqeror, Safari/Chrome, OmniWeb 4.5+, iCab, NetFront 3.4+, Netbox, OpenTV and iPanel microbrowser should show the list collapsed.

This example has been collapsed using the script. It is set to auto collapse child branches when sibling branches are expanded. Like the menu above, it is set to highlight links that point to the current page, but unlike the menu above, it will also expand the tree to show this link. This could also be combined with the cookies technique if desired.

To define the lists, use just standard HTML, eg:

<ul id="someID">
  <li>Book 1
    <ul>
      <li><a href="someHref">Chapter 1</a></li>
      <li><a href="someHref">Chapter 2</a></li>
      <li><a href="someHref">Chapter 3</a></li>
      <li><a href="someHref">Chapter 4</a></li>
    </ul>
  </li>
  <li>Book 2
    <ul>
      <li><a href="someHref">Chapter 1</a></li>
      <li><a href="someHref">Chapter 2</a></li>
      <li>Chapter 3
        <ul>
          <li><a href="listCollapseExample.html">Ex 1</a></li>
          <li><a href="someHref">Ex 2</a></li>
        </ul>
      </li>
      <li><a href="javascript:notA();">Chapter 4</a></li>
    </ul>
  </li>
  <li>Book 3
    <ul>
      <li><a href="someHref">Chapter 1</a></li>
      <li><a href="someHref">Chapter 2</a></li>
      <li><a href="someHref">Chapter 3</a></li>
      <li><a href="someHref">Chapter 4</a></li>
    </ul>
  </li>
</ul>

Use your choice of CSS for styling, then use the script to collapse the lists:

<script type="text/javascript" src="listCollapse.js"></script>
<script type="text/javascript">
window.onload = function () {

  //choose one of these options

  //option 1 - no auto-child-collapse
  compactMenu('someID',false,'&plusmn; ');

  //option 2 - auto-child-collapse
  compactMenu('someID',true,'&plusmn; ');

}
</script>

My examples all use the ± sign to show that a branch can be expanded or collapsed. You can change this to anything you want, by replacing &plusmn; with the HTML of your choice (must be HTML that is allowed inside a link):

compactMenu('someID',true,'<em>More!<\/em> ');
compactMenu('someotherID',true,'');

To collapse multiple lists, put all collapse instructions in the onload event handler - each list can have its own options:

<script type="text/javascript" src="listCollapse.js"></script>
<script type="text/javascript">
window.onload = function () {
  compactMenu('someID',false,'&plusmn; ');
  compactMenu('anotherID',true,'&plusmn; ');
  compactMenu('thirdID',true,'&gt;&gt; ');
}
</script>

If you want to remember the state of the branches, so that when they load another page or return to the page, it is still expanded to the same state as before, you will also need to use my cookie script (or some other one if you really want to) - this will work with either of the above options:

<script type="text/javascript" src="listCollapse.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
window.onload = function () {
  compactMenu('someID',false,'&plusmn; ');
  stateToFromStr('someID',retrieveCookie('menuState'));
}
window.onunload = function () {
  setCookie('menuState',stateToFromStr('someID'));
}
</script>

To highlight all links in a list that point to the current page, add the instruction to do this after the instruction to collapse the list (I recommend that you put it before any instructions to recover branch state). You will need to supply a class that you want to be added to the link if it points to the current page - you can style this using CSS. If you choose to expand these branches as well, it will assume the first match is the one that should be shown, and although it will apply the class to all matches, it will only attempt to show the first one. If branch state is also recovered with auto-collapse enabled, the second state will be the one that ends up being respected:

<script type="text/javascript" src="listCollapse.js"></script>
<script type="text/javascript">
window.onload = function () {
  compactMenu('someID',false,'&plusmn; ');
  selfLink('someID','selfhighlight',true);
}
</script>

You can also make it highlight links to a specific address (not just the current page address) by passing an extra parameter to selfLink. It can understand relative or absolute addresses:

selfLink('someID','selfhighlight',true,'foo.html');

It is also possible to expand/collapse all branches in a list (as long as it is not set to auto-collapse):

expandCollapseAll('someID',true);

This can be called at any time after the list has been initially collapsed. Set the second parameter to false to collapse all.

Tree view

It is possible to make tree views with this script, but this must be done using CSS. The script cannot automatically do this for you. Fortunately, the CSS is not very complicated to make a basic effect. This example version is done using CSS dotted borders, and two background images. Unlike with the collapsible list script, it is not a simple matter of swapping images to get a different effect - the CSS borders (or whatever you use for your own tree view) would also need to be changed.

Since a different image needs to be applied to the last LI in each list, it needs to be given a class so it can be targetted (it would also be possible to use the :last-child pseudo-class, but that is not supported by enough browsers yet). This example uses class="last".

CSS

ul.maketree, ul.maketree ul, ul.maketree li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.maketree ul { padding-left: 0.3em; }
ul.maketree li {
  border-left: 1px dotted #000;
  padding-left: 13px;
  background: url(dotted.gif) scroll no-repeat 1px 0.8em;
}
ul.maketree li.last {
  border-left-width: 0px;
  padding-left: 14px;
  background: url(dottedangle.gif) scroll no-repeat left top;
}

Demonstration

Alternative versions

Note that these versions of the script are not supported; if you are using them, and something is not working, you are on your own. They are based on older versions of the script, and may not offer all the functionality of current versions.

Thanks to Raymond Martens, you can force old versions of the script to just use the plus/minus HTML as the expand/collapse link, even if the rest of the branch is not a link (available in current versions as an option). Raymond also worked out a way to make those versions produce tree structures with some simple CSS that IE does not support, or a script that it does, and also provided a way to change the image (only works if you use a mouse to click it, and must not be combined with auto-collapse). Just to be extra nice, he decided to share it with us :) (This functionality is possible much more cleanly in current versions using simple CSS.)

Nisad Sivcevic also came up with a way to use images, that whould work even if you don't use a mouse, and should also work with auto-collapse. However, it has other problems, such as not allowing branch headings to contain links.

This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.