Origami Frontend Components & Services

Readme: o-expander

Accessible, content-aware widget for expanding and collapsing content

Usage

Markup

<div data-o-component="o-expander" class="o-expander">
    <div class="o-expander__content"></div>
    <a class="o-expander__toggle o--if-js"></a>
</div>

o-expander__toggle and o-expander__content can be put anywhere within o-expander as long as o-expander__toggle is not contained within o-expander__content. There are no restrictions on sibling markup.

JavaScript

Static methods

init(el, opts)

This generally sticks to the usual origami convention. If el is an HTMLElement with the attribute data-o-component="o-expander" a single instance will be created for that element and returned, otherwise an expander will be created for each o-expander element found within el, and an array of instances returned.

Instance methods

destroy()

Destroys an o-expander instance and removes all event listeners

Events

o-expander fires the following events, which always fire before any repainting/layout occurs

Sass

Options

All the following can be passed in an options object in the second parameter of oExpander#init() or as data-attributes (hyphenated and prefixed by o-expander e.g. data-o-expander-shrink-to="height")


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-expander

If using the Build Service, add o-expander@^4.7.1 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-expander@^4.7.1".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com