Expand & Collapse a List

OK, I'll admit it, I'm afraid of Javascript. I've just never learned the inner workings of the DOM, and honestly it's not a big priority. I get more of a charge out of finding great bits of code out there in the blogosphere and adapting them to solve real-world problems. The trick is to find bits of code that are easy to implement and can be tweaked if I need to without too much hair-pulling.

Here's a common scenario: the FAQ list. Often this is one page containing several dozen questions, most of which have a one- or two-sentence answer. If you display all the questions and answers on one page, it's too long. If each question links to a separate page, it requires too much work to browse the list. The best solution would be an expandable (and collapsible) all on one page. This way the user can focus her attention on one item at a time, but easily browse other items as well.

I've looked at a number of scripts that address this idea. So far the easiest one I've found to work with is from Karl Nelson: Expanding Nested Lists. Here's my workup of his example:

• Item 1
  • Item 1.1
  • Item 1.2
• Item 2
  • Item 2.1
    • Item 2.1.1
    • Item 2.1.2
      • Item 2.1.2.1
      • Item 2.1.2.2
    • Item 2.1.3
  • Item 2.2

An FAQ example might look like this:

• Why did the chicken cross the road?
  • To get to the other side.

Related Resources

How to add expand/collapse categories to a Blogger blog

Using Javascript to expand and collapse divs

Note: the above link lays out an even easier example using divs, as follows:

[see a more detailed example ]

<- back to index | ©2006 clg.