jQuery experiments: Accordion - Nested Lists

the script

In these examples accessibility is taken into account. The expand/collapse functionality is keyboard accessible by tabbing to the item of interest and pressing 'ENTER' to expand/collapse. With JavaScript turned off, the whole content is expanded.

If you are looking for a nested accordion, see jQuery: Nested Accordion.

1.Nested Lists - Slide Effects

  • Show/Hide UL 1
    • Item 1.1.
    • Item 1.2.
  • Show/Hide UL 2
    • Item 2.1.
    • Item 2.2.
  • Show/Hide UL 3
    • Item 3.1.
    • Item 3.2.

2.Nested Lists - Slide Effects

  • Show/Hide UL 1
    • Item 1.1.
    • Item 1.2.
  • Show/Hide UL 2
    • Item 2.1.
    • Item 2.2.
  • Show/Hide UL 3
    • Item 3.1.
    • Item 3.2.

3.Nested Lists - Slide Effects

  • Show/Hide UL 1
    • Item 1.1.
    • Item 1.2.
  • Show/Hide UL 2
    • Item 2.1.
    • Item 2.2.
  • Show/Hide UL 3
    • Item 3.1.
    • Item 3.2.

4.Nested Lists - Slide Effects - Always keeps one sub-list shown

  • Show/Hide UL 1
    • Item 1.1.
    • Item 1.2.
  • Show/Hide UL 2
    • Item 2.1.
    • Item 2.2.
  • Show/Hide UL 3
    • Item 3.1.
    • Item 3.2.

5.Nested Lists - Queued Slide Effects

  • Show/Hide UL 1
    • Item 1.1.
    • Item 1.2.
  • Show/Hide UL 2
    • Item 2.1.
    • Item 2.2.
  • Show/Hide UL 3
    • Item 3.1.
    • Item 3.2.

6.Nested Lists - Queued Slide Effects - Always keeps one sub-list shown

  • Show/Hide UL 1
    • Item 1.1.
    • Item 1.2.
  • Show/Hide UL 2
    • Item 2.1.
    • Item 2.2.
  • Show/Hide UL 3
    • Item 3.1.
    • Item 3.2.

If you find a bug or have a suggestion/request, please send me an e-mail.

More Expand/Collapse demos:

  1. jQuery: Expand/Collapse
  2. jQuery: Accordion
  3. jQuery: Accordion - Heading/DIV
  4. jQuery: Accordion with corresponding href and title attributes
  5. jQuery: Expand/Collapse in different directions
  6. jQuery: Multiple Expand All/Collapse All
  7. jQuery: Toggle the visibility of the sidebar
  8. jQuery: Nested Accordion