https://github.com/threespot/expand-toggle
Accessible expand-collapse module
https://github.com/threespot/expand-toggle
Last synced: about 1 year ago
JSON representation
Accessible expand-collapse module
- Host: GitHub
- URL: https://github.com/threespot/expand-toggle
- Owner: Threespot
- License: mit
- Created: 2018-03-21T18:12:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-22T19:36:58.000Z (almost 2 years ago)
- Last Synced: 2025-03-26T13:21:24.295Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://threespot.github.io/expand-toggle/
- Size: 954 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Expand Toggle
[](https://www.npmjs.com/package/@threespot/expand-toggle)
[](https://travis-ci.org/Threespot/expand-toggle)
[](https://coveralls.io/github/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/
## 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
```
**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;
}
}
```
### Options
`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
});
```
### Events
#### 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](https://github.com/Threespot/expand-toggle/blob/master/LICENSE.md).
## 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](https://www.threespot.com).
[](https://www.threespot.com)