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.
-
panel loading 1
Plain old heading and paragraph content.
-
- How about…
- … a list …
- … of items?
-
An image in a paragraph.
-
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.
-
panel loading 1
Plain old heading and paragraph content.
-
- How about…
- … a list …
- … of items?
-
An image in a paragraph.
-
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.
-
panel loading 1 (Locked open)
Plain old heading and paragraph content.
-
- How about…
- … a list …
- … of items?
-
An image in a paragraph.
-
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.
-
panel loading 1
Plain old heading and paragraph content.
-
- How about…
- … a list …
- … of items?
-
An image in a paragraph.
-
A nested list of items
- Item 1
- Item 2
- Subitem 1
- Subitem 2
- Subitem 3
- Item 3
- Item 4
- Item 5