Expand Toggle


Simple and accessible expandable functionality, similar to jQuery’s slideToggle() method.

Inspired by:

- https://inclusive-components.design/menus-menu-buttons#truemenus
- https://www.stefanjudis.com/snippets/how-to-animate-height-with-css-grid/

Install

``bash
yarn add @threespot/expand-toggle
`

Usage

JavaScript

`js
import ExpandToggle from "@threespot/expand-toggle";

document.querySelectorAll("[data-expands]").forEach(el => new ExpandToggle(el));
`

Markup

`html

Open


`scss
// This class name is just an example
.expandable {
$speed: 500ms;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows $speed ease, visibility 0s linear $speed;
visibility: hidden;

&[aria-hidden="false"],
.no-js & {
grid-template-rows: 1fr;
transition: grid-template-rows $speed ease, visibility 0s linear 0s;
visibility: visible;
}

&-wrap {
overflow: hidden;
}
}
`

$3

data-expands-class defines a class (or multiple classes) to apply to the toggle button and expandable element when expanded

data-expands-text defines button text to use when expanded

data-expanded will expand the element by default

The following options can be set via JavaScript:

`js
new ExpandToggle(el, {
expandedClasses: "", // string, accepts multiple space-separated classes
activeToggleText: "", // expanded state toggle button text
shouldStartExpanded: false, // component starts expanded on init
onReady: null // ready callback function
});
`

$3

#### ready

Since the ready event may be trigger immediately, bind using the onReady option:

`js
const toggle = new ExpandToggle(el, {
onReady: function() {
console.log('ready');
}
});
`

#### expand

Triggered when component is expanded

`js
toggle.on('expand', function() {
console.log('expand');
});
`

#### collapse

Triggered when component is collapsed

`js
toggle.on('collapse', function() {
console.log('collapse');
});
`

#### destroy

Triggered when component is destroyed

`js
toggle.on('destroy', function() {
console.log('destroy');
});
``

License

This is free software and may be redistributed under the terms of the MIT license.

About Threespot

Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at https://www.threespot.com.