Collapsible List

Posted at 11:01 am on August 22nd, 2007

Filed in:

This script turns a nested HTML list into a collapsible menu that uses cookies to remember which nodes are expanded, even when you navigate to a different page. If JavaScript is disabled, the list just remains in its default fully-expanded state.


I think the best way to approach this is to just jump in and look at the example. It consists of several pages that are identical except for the page title and the heading.

Nodes with circular bullets have no submenus, and are not expandable. Nodes with arrows are expandable. Clicking on an arrow expands or collapses that node without a page load. Clicking on a link loads a new page and expands that node if it can be expanded.

The state of the menus persists across page loads.


The script requires two other scripts, plus a CSS file, which you’ll probably want to tweak.

The example also uses these images, which you’re welcome to use, but don’t have to:

Leave a Comment

  • Formatting
    • No HTML. Any code you enter will display as that code.
    • If you are putting code in your reply in order to present the code itself, you can use these special HTML comments for formatting:
      Inline: <!--code-->...<!--/code-->
      Block: <!--pre-->...<!--/pre-->

© Thomas Peri