ux-accordion

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.

See Foundation's accordion.html docs for details.

Features:

  • (TODO) Distributed accordion groups
  • (TODO) Accessibility
  • (TODO) Callbacks (fire RactiveJS semantic event)

Use Cases Manifest Three Accordions (static)Three Accordions (data driven)
Item 1

First accordion item

Item 2

Second accordion item

Item 3

Third accordion item



	
		Item 1
		

First accordion item

Item 2

Second accordion item

Item 3

Third accordion item

    {{#events.uxAccordion_2}}
  • {{this}}
  • {{/}}

	{
    "items": [
        {
            "title": "Accordion item 1",
            "content": "First accordion item"
        },
        {
            "title": "Accordion item 2",
            "content": "Second accordion item"
        },
        {
            "title": "Accordion item 3",
            "content": "Accordion 3: Lorem ipsum dolor"
        }
    ]
}
Semantic Event Mapping
changeAccordion - Event thrown when the accordion state is changed


Semantic Data Model
items - Array of items - see ux-accordionitem.