Open primary navigation
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 collapse.
  • 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.

Links

ExpanderUtility#toggle

Instance Method

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

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.

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.

Links

ExpanderUtility#isCollapsed

Instance Method

Return true if the expander is currently collapse.

Returns

  • Boolean

Links

ExpanderUtility#destroy

Instance Method

Remove the expander from the page.

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.

Links

Expander.init(rootElement, opts)

Static Method

Initialise the component.

parameter type default description
rootElement 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.1.0

Install o-expander

If using the Build Service, add o-expander@^6.1.0 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.1.0".

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