EvoToolkit - v2.3.0 (Changelog)

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

Luke Harrison

Dependents
This part is required by one or more components to display properly. If the dependent is enabled and this isn't, it will automatically be imported.

  • 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<div class="o-expander"> <div class="o-expander__trigger c-type-link u-align-center">Toggle Expander Content</div> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> <div class="o-expander__trigger c-type-link u-align-center">Close Expander Content</div> </div> </div>

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-right-small" data-expander="js-my-expander-9973">Toggle Expander Externally</button> <div class="o-expander js-my-expander-9973"> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> </div> </div>

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-right-small" data-expander="js-my-expander-8091">Toggle Reduced Expander</button> <div class="o-expander js-my-expander-8091"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> <div class="o-expander__trigger c-type-link u-align-center">Close Expander Content</div> </div>

You can customize 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 is-active stateful class is added to the trigger.

Default
Example
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-right-small" data-expander="js-my-expander-7974">Toggle Expander Externally</button> <div class="o-expander js-my-expander-7974"> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> </div> </div>
Name
Name data-expander-behaviour
Description
Description

You can change the behaviour of the expander from its default toggle mode to either open or close. This can be added to either the top level block component o-expander or any external trigger. If the attribute is on both an external trigger and the top level block component, the trigger takes precedence.

Default
Default toggle
Example
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-bottom-small" data-expander="js-my-expander-6157" data-expander-behaviour="open">Open Expander</button> <button class="c-button u-margin-bottom-small" data-expander="js-my-expander-6157" data-expander-behaviour="close">Close Expander</button> <div class="o-expander js-my-expander-6157"> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> </div> </div>
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 o-expander or any external trigger. If the attribute is on both an external trigger and the top level block component, the trigger takes precedence.

Default
Default 0
Example
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-bottom-small" data-expander="js-my-expander-6325" data-expander-delay="3000">Toggle after 3s</button> <button class="c-button u-margin-bottom-small" data-expander="js-my-expander-6325">Toggle after 0.5s</button> <div class="o-expander js-my-expander-6325" data-expander-delay="500"> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> <div class="o-expander__trigger c-type-link" data-expander-delay="1000">Close after 1s</div> </div> </div>
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 o-expander or any external trigger. If the attribute is on both an external trigger and the top level block component, the trigger takes precedence.

Default
Default 250
Example
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-bottom-small" data-expander="js-my-expander-3214" data-expander-speed="3000">Open Instant Expander (Slowly)</button> <div class="o-expander js-my-expander-3214" data-expander-speed="0"> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> <div class="o-expander__trigger c-type-link">Close Instantly</div> </div> </div>
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 o-expander or any external trigger. If the attribute is on both an external trigger and the top level block component, the trigger takes precedence. See w3schools for more info on timing functions.

Default
Default ease
Example
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.

Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.

Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.

<button class="c-button u-margin-bottom-small" data-expander="js-my-expander-3817">Toggle Normally</button> <button class="c-button u-margin-bottom-small" data-expander="js-my-expander-3817" data-expander-timing="ease-in">Toggle with a slow start</button> <button class="c-button u-margin-bottom-small" data-expander="js-my-expander-3817" data-expander-timing="ease-out">Toggle with a slow end</button> <div class="o-expander js-my-expander-3817" data-expander-speed="500"> <div class="o-expander__content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum vitae nisi et vulputate. Cras facilisis magna vehicula eleifend ullamcorper. Ut eu nisi eget lectus lobortis tincidunt. Sed dictum nibh sem, non malesuada augue malesuada nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum eros neque, ac maximus odio ullamcorper in.</p> <p>Aliquam ut magna at ex ultricies aliquet. Pellentesque placerat urna sapien, et ornare metus tincidunt nec. Phasellus in dolor id elit porttitor eleifend. Donec sagittis quis dolor nec fringilla. Maecenas risus turpis, sagittis ut mollis vel, dapibus sed risus.</p> <p>Aliquam facilisis, velit a dignissim sollicitudin, tortor mi pharetra felis, efficitur rutrum sem ipsum cursus nisi. Duis vitae elit ornare, consectetur risus vel, elementum magna. Donec tincidunt aliquet luctus.</p> </div> </div>

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector. See JavaScript API for more info.

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

open

Fires when the expander has finished opening.

close

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); });