Expander
This object pattern allows you to create an undercorated expander element where hidden content can be shown/hide on click of a trigger element.
Source
Contributors
- Overview
- Options
- Methods
- Events
Base
Standard
You can toggle the expander using a o-expander__trigger element, but this must be a child of the top level o-expander element.
If the expander is active, o-expander__trigger has a is-active stateful class applied to it.
External Trigger
It's also possible to toggle the expander from an external, unrelated element through use of the data-expander attribute. This and other options are covered in the expander's 'Options' section.
Reduced
If the expander doesn't contain a o-expander__content element, the logic is instead applied to the top level o-expander element. This behaviour is useful as it allows for more markup flexibility when using the expander in the construction of components.
You can modify the expander object by overriding certain JavaScript functionality through HTML data-attributes.
JavaScript
You can modify expander object functionality by adding the below data attributes. Unless stated otherwise, these must be placed on the top level block component (eg:- c-calendar)
| Name | |
|---|---|
| Name |
data-expander
|
| Description | |
| Description |
Adding this attribute to an element and setting its value to your expander makes it into a trigger element on click. If the expander is going from closed to open, a |
| Default | |
| Example | |
| Example |
|
| Name | |
|---|---|
| Name |
data-expander-behaviour
|
| Description | |
| Description |
You can change the behaviour of the expander from its default |
| Default | |
| Default |
toggle
|
| Example | |
| Example |
|
| Name | |
|---|---|
| Name |
data-expander-delay
|
| Description | |
| Description |
You can apply a delay in milliseconds to the expander. This can be added to either the top level block component |
| Default | |
| Default |
0
|
| Example | |
| Example |
|
| Name | |
|---|---|
| Name |
data-expander-speed
|
| Description | |
| Description |
This allows you to change the duration of the expander's animation. This can be added to either the top level block component |
| Default | |
| Default |
250
|
| Example | |
| Example |
|
| Name | |
|---|---|
| Name |
data-expander-timing
|
| Description | |
| Description |
This allows you to change the timing function for the expander's CSS animation. This can be added to either the top level block component |
| Default | |
| Default |
ease
|
| Example | |
| Example |
|
This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.
See JavaScript API for more information and a list of shared, global methods.
open
You can programatically open the expander by running the 'open' method. You can pass options to the method to customize expander behaviour, as per below.
// Would open the expander within 250ms, using the 'ease' CSS timing option, after 100ms has passed.
evo('.js-my-expander-class').expander('open', {
speed: 250,
timing: 'ease',
delay: 100
});
close
You can programatically close the expander by running the 'close' method. You can pass options to the method to customize expander behaviour, as per below.
// Would close the expander within 250ms, using the 'ease' CSS timing option, after 100ms has passed.
evo('.js-my-expander-class').expander('close', {
speed: 250,
timing: 'ease',
delay: 100
});
toggle
You can programatically toggle the expander by running the toggle method. You can pass options to the method to customize expander behaviour, as per below.
// Would toggle the expander within 250ms, using the 'ease' CSS timing option, after 100ms has passed.
evo('.js-my-expander-class').expander('toggle', {
speed: 250,
timing: 'ease',
delay: 100
});
This object has bespoke events which trigger automatically on certain actions. You can hook into these using event listeners to run your own custom code.
Typically, most events are fired from the block level class (eg:- c-tabs), however some may fire from element level classes (eg:- c-tabs__item). In practice, this usually doesn't matter as these element level events will bubble upwards and trigger any listeners on the block element. When this happens, you can get a reference to the element via the target property of the event object.
Events List
| Name | Description |
|---|---|
|
Fires when the expander has finished opening. |
|
Fires when the expander has finished closing. |
Example code snippet showing how you can set up an event listener.
const element = document.querySelector('.c-my-component');
element.addEventListener('eventName', (e) => {
console.log('my event has fired');
// Access event details object, if it exists
console.log(e.details);
// Access the element the event was fired from
console.log(e.target);
});