Skip to content

Latest commit

 

History

History
63 lines (34 loc) · 1.54 KB

Readme.md

File metadata and controls

63 lines (34 loc) · 1.54 KB
Raw

Accordion

Basic (vertical) accordion component

Example

See test/index.html for example usage.

Installation

$ component install ericgj/accordion

Events

  • select(panel) when an accordion panel is selected
  • deselect(panel) when an accordion panel is deselected

API

Accordion(el, options)

Creates a new Accordion bound to the given DOM element or selector.

It makes the following assumptions about the markup:

  1. The given element contains one or more hAtom entries. That is, div or article elements matched by .hentry.

  2. Each entry has an .entry-title element (again following hAtom), which is used as the accordion header. Typically this would be an h3 etc, but could also be a header that contains several inline- block elements, etc.

  3. If you want a caret (CSS arrow), for convenience the built-in CSS includes styles for this. Simply include a <span class="caret"></span> within your .entry-title element.

The following options are available:

  • deselect {Boolean} allows collapse of selected panel (default true)
  • multiselect {Boolean} allows expansion of more than one panel (default false)

Accordion#select(panel)

Programmatically select (expand) given panel

Accordion#deselect(panel)

Programmatically deselect (collapse) given panel

Accordion#deselectAll

Deselect all panels

License

MIT