Origami Frontend Components & Services

JSDoc: o-expander

new ExpanderUtility(...)

Class constructor.

parameter type default description
oExpanderElement HTMLElement The component element in the DOM
opts object An options object for configuring the component.
opts.shrinkTo string | number ['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState string | number ['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.expandedToggleText string ['fewer'] - Toggle text when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText string ['more'] - Toggle text when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".
opts.selectors object The selectors for expander elements.
opts.selectors.toggle string A selector for the expanders toggles e.g. `.my-expander__toggle`.
opts.selectors.content string A selector for the expanders content, which will collapse or expand e.g. `.my-expander__content`.
opts.selectors.item string A selector for the items within the expander content e.g. `li` (required only when `shrinkTo` is set to a number).
opts.classnames object The classnames to apply to the expander for different states.
opts.classnames.initialized string The class to apply to the top level of the expander when initialised by JS e.g. `.my-expander--initialized`.
opts.classnames.inactive string The class to apply to the top level of the expander when it can not expand or collapse e.g. `.my-expander--inactive`.
opts.classnames.expanded string The class to apply to the expander content when it is expanded e.g. `.my-expander--expanded`.
opts.classnames.collapsed string The class to apply to the expander content when it is collapsed JS e.g. `.my-expander--collapsed`.
opts.classnames.collapsibleItem string The class to apply to any item (see the `selectors.item` option) which will be hidden when collapsed e.g. `.my-expander__collapsible-item` (required only when `shrinkTo` is set to a number).

Methods

  • apply(isSilent) - (instance) Recalculate and apply the styles to expand or collapse the expander according to its current state.
  • toggle - (instance) Toggle the expander so expands or, if it's already expanded, collapses.
  • expand(isSilent) - (instance) Expand the expander.
  • collapse(isSilent) - (instance) Collapse the expander.
  • isCollapsed - (instance) Return true if the expander is currently collapsed.
  • destroy - (instance) Remove the expander from the page.

Links

new Expander(...)

o-expander constructor.

parameter type default description
oExpanderElement HTMLElement The component element in the DOM
opts object An options object for configuring the component.
opts.shrinkTo string | number ['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState string | number ['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.itemSelector string ['li'] - A selector for the expandable items when `shrinkTo` is set to a number, relative to `.o-expander__content`.
opts.expandedToggleText string ['fewer'] - Toggle text for when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText string ['more'] - Toggle text for when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".

Methods

Links

ExpanderUtility#apply(isSilent)

Instance Method

Recalculate and apply the styles to expand or collapse the expander according to its current state.

parameter type default description
isSilent boolean [false] Set to true to avoid firing the `oExpander.expand` or `oExpander.collapse` events.

Returns

  • void

Links

ExpanderUtility#toggle

Instance Method

Toggle the expander so expands or, if it's already expanded, collapses.

Returns

  • void

Links

ExpanderUtility#expand(isSilent)

Instance Method

Expand the expander.

parameter type default description
isSilent boolean [false] Set to true to avoid firing the `oExpander.expand` event.

Returns

  • void

Links

ExpanderUtility#collapse(isSilent)

Instance Method

Collapse the expander.

parameter type default description
isSilent boolean [false] Set to true to avoid firing the `oExpander.collapse` event.

Returns

  • void

Links

ExpanderUtility#isCollapsed

Instance Method

Return true if the expander is currently collapsed.

Returns

  • boolean - - is the expander collapsed

Links

ExpanderUtility#destroy

Instance Method

Remove the expander from the page.

Returns

  • void

Links

Expander.createCustom(oExpanderElement, opts)

Static Method

Construct a custom expander. Useful to add customised expander functionality to a component. E.g. to animate away collapsed items rather than hide them immediately.

parameter type default description
oExpanderElement HTMLElement The expander element in the DOM.
opts object [{}] - An options object for configuring the expander @see ExpanderUtility.

Returns

  • ExpanderUtility - - A custom expander

Links

Expander.init(rootEl, opts)

Static Method

Initialise the component.

parameter type default description
rootEl HTMLElement | string The root element to initialise the component in, or a CSS selector for the root element
opts object [{}] - An options object for configuring the component

Returns

  • Expander | Array.<Expander> - - Expander instance(s)

Links

new Expander(...)

o-expander constructor.

parameter type default description
oExpanderElement HTMLElement The component element in the DOM
opts object An options object for configuring the component.
opts.shrinkTo string | number ['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState string | number ['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.itemSelector string ['li'] - A selector for the expandable items when `shrinkTo` is set to a number, relative to `.o-expander__content`.
opts.expandedToggleText string ['fewer'] - Toggle text for when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText string ['more'] - Toggle text for when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".

Methods

Links

Status
active
Switch component view

GitHub: o-expander@6.2.3

Install o-expander

If using the Build Service, add o-expander@^6.2.3 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-expander@^6.2.3".

Help & Support

o-expander is maintained directly by the Origami team. If you have any questions about o-expander or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com