Simple and accessible expandable functionality, similar to jQuery’s `slideToggle()` method.
npm install @threespot/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/
``bash`
yarn add @threespot/expand-toggle
JavaScript
`js
import ExpandToggle from "@threespot/expand-toggle";
document.querySelectorAll("[data-expands]").forEach(el => new ExpandToggle(el));
`
Markup
`html
Styles
The following minimum styles are required:
`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 expandeddata-expands-text defines button text to use when expandeddata-expanded will expand the element by defaultThe 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');
});
``This is free software and may be redistributed under the terms of the MIT license.
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.
