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 plugin, 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/SlideFade UL 1

  • Item 1.1.
  • Item 1.2.

Fade/SlideFade UL 2

  • Item 2.1.
  • Item 2.2.

Fade/SlideFade 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

  • 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.

If you find a bug or have a suggestion/request, please send me an e-mail. I apologize if sometimes, because of limited time, I can't respond to all requests or my responses are delayed.

If some of my scripts have been useful to you and you would like to thank me, feel free to donate any amount you wish. Thanks :)