Widgets: Accordion

This is a customisable accordion widget for jQuery. It gets around the well documented jQuery animation jump issue of slideDown() by just not using it.

Example 1

This is the default accordion. Toggling is disabled, and the first item in the accordion automatically opens during accordion initialisation.

• Handle 1

  Panel 1

  Plain old heading and paragraph content.

• Handle 2

  • How about…
  • … a list …
  • … of items?

• Handle 3

  An image in a paragraph.

• Handle 4

  A nested list of items

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2
    • Subitem 3
  • Item 3
  • Item 4
  • Item 5

Example 2

With toggling enabled, the user is able to close down all items.

• Handle 1

  Panel 1

  Plain old heading and paragraph content.

• Handle 2

  • How about…
  • … a list …
  • … of items?

• Handle 3

  An image in a paragraph.

• Handle 4

  A nested list of items

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2
    • Subitem 3
  • Item 3
  • Item 4
  • Item 5

Example 3

By applying a class of "locked" (or whatever is specified in the parameter object that is passed to the accordion plug-in), the corresponding item is locked open. The rest of the accordion functions as expected around the locked item.

• Handle 1

  Panel 1 (Locked open)

  Plain old heading and paragraph content.

• Handle 2

  • How about…
  • … a list …
  • … of items?

• Handle 3

  An image in a paragraph.

• Handle 4

  A nested list of items

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2
    • Subitem 3
  • Item 3
  • Item 4
  • Item 5

Example 4

This example isn't an accordion at all, and behaves like a standard collapsible menu. It is possible to open more than one item.

• Handle 1

  Panel 1

  Plain old heading and paragraph content.

• Handle 2

  • How about…
  • … a list …
  • … of items?

• Handle 3

  An image in a paragraph.

• Handle 4

  A nested list of items

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2
    • Subitem 3
  • Item 3
  • Item 4
  • Item 5