jQuery experiments: Accordion

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.Accordion - Heading/List

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.Accordion - Heading/List

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.Accordion - Heading/List

Slide Up/Down UL 1

  • Item 1.1.
  • Item 1.2.

Slide Up/Down UL 2

  • Item 2.1.
  • Item 2.2.

Slide Up/Down UL 3

  • Item 3.1.
  • Item 3.2.

4.Accordion - Heading/List

Queued Slide: UL 1

  • Item 1.1.
  • Item 1.2.

Queued Slide: UL 2

  • Item 2.1.
  • Item 2.2.

Queued Slide: UL 3

  • Item 3.1.
  • Item 3.2.

5.Accordion - Heading/List

Fade In/Out UL 1

  • Item 1.1.
  • Item 1.2.

Fade In/Out UL 2

  • Item 2.1.
  • Item 2.2.

Fade In/Out UL 3

  • Item 3.1.
  • Item 3.2.

6.Accordion - Heading/List

SlideFade UL 1

  • Item 1.1.
  • Item 1.2.

SlideFade UL 2

  • Item 2.1.
  • Item 2.2.

SlideFade UL 3

  • Item 3.1.
  • Item 3.2.

7.Accordion - Nested Lists

  • 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 - Nested Lists
  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