YUI 3 Accordion Examples

Controls

Allow multiple open sections
Allow all sections to be closed
Animate insert/remove
Animate open/close

Notes

• Back to project list
• Click here to see documentation.
• Click here to see fixed height/width examples.
• Click here to see variable height/width examples.
• Click here to see a simple, vertical example.
• For the horizontal accordion:
  • The accordion container requires height
  • The titles require width and height
  • The sections require width
• FocusManager Node Plugin:
  Use the up/down arrow keys for vertical.
  Use the left/right arrow keys for horizontal.

Vertical

Horizontal

Vertical (from markup)

• #1

  testing

• #2

  testing testing

• #3

  testing

  testing

  testing

  testing

  testing

Horizontal (from markup)

• #1

  testing

• #2

  testing testing

• #3

  testing

  testing

  testing

  testing

  testing