accordion.adoc

Accordion API

An Accordion represents a column of collapsible content regions.

Every instance contains an array of Fold objects: one for each child of the accordion’s container element.

Table of Contents

• Constructor
• Methods
  • update( )
  • updateFold(fold, offset)
  • refresh(allowSnap)
• Static Methods
  • Accordion.getAccordion(node)
  • Accordion.getFold(node)
  • Accordion.setResizeRate(delay)
• Properties
  • childAccordions
  • disabled
  • el
  • folds
  • height
  • index
  • parent
  • parentFold
  • root
  • wrongSize

Constructor

new Accordion(element, options);

Initialise a new accordion instance.

element

(Element) Reference to a DOM element. Stored in the instance’s .el property.

options

(Object) Optional dictionary of options.

Methods

Most of these methods are called internally. Generally, they won’t need to be used directly.

update( )

Update the height of each fold to fit its content.

updateFold(fold, offset)

Update the vertical ordinate of each sibling for a particular fold.

fold

(Fold) The Fold whose height changed.

offset

(Number) Pixel distance to adjust by.

refresh(allowSnap)

Recalculate the boundaries of an Accordion and its descendants.

This method should only be called if the width of a container changes, or if a fold’s contents have resized unexpectedly (such as when an image has finished loading).

allowSnap

(Boolean) Snap folds instantly into place without transitioning.
Relies on snapClass to disable CSS transitions.

Static Methods

Accordion.getAccordion(node)

Return the closest (most deeply-nested) accordion enclosing an element.

node

(Node) Document node being queried.

Accordion.getFold(node)

Return the closest (most deeply-nested) fold enclosing an element.

node

(Node) Document node being queried.

Accordion.setResizeRate(delay)

Alter the rate at which screen-resize events update accordion widths.

The default rate is 25ms.

delay

(Number) Rate expressed in milliseconds.

If false or a negative value is supplied, no resize handling is performed. Passing zero has the effect of handling resizes as quickly as the event is dispatched by the browser, which usually isn’t very performant.

Properties

In addition to the properties listed here, the values of the following constructor options are stored on the instance as properties:

• closeClass
• heightOffset
• noAria
• noKeys
• noTransforms
• onToggle
• openClass
• useBorders

childAccordions

Type

Array

List of accordions nested inside this one.

This property is only defined for accordions with children.

disabled

Type

Boolean

Whether the accordion’s been deactivated.

When disabling an accordion, all styling and event listeners are removed. Essentially, this "undoes" the entire instance as though it no longer exists in the page. The accordion can be easily restored by setting disabled to false.

An expected use-case for this property is activating an accordion only after the screen shrinks to a certain size. This would allow tabbed or lengthy content to be better portrayed on smartphones.

el

Type

HTMLElement

Reference to the accordion’s container element.

The container element is the single HTML node that encloses each collapsible content section. It’s passed as the first argument when creating a new Accordion instance:

new Accordion(el, options);

folds

Type

Array

List of Fold instances.

height

Type

Number

Height of the accordion’s container element.

index

Type

Number

Zero-based integer representing the order in which this accordion was created.

parent

Type

Accordion

The accordion enclosing this one.

Disabled accordions are skipped when traversing an instance’s ancestry.

parentFold

Type

Fold

The fold of the parent accordion that encloses this one.

As with the .parent property, disabled ancestors are skipped when traversing the ancestry.

root

Type

Accordion

(Read-only) Top-level ancestor this accordion’s nested inside.

wrongSize

Type

Boolean

(Read-only) Whether one of the Accordion’s folds has been resized incorrectly.