https://github.com/panoply/relapse
🪗 A lightweight ESM (vanilla) toggle utility for creating dynamic collapsible components
https://github.com/panoply/relapse
accordion collapse dropdown toggle typescript vanilla
Last synced: 6 months ago
JSON representation
🪗 A lightweight ESM (vanilla) toggle utility for creating dynamic collapsible components
- Host: GitHub
- URL: https://github.com/panoply/relapse
- Owner: panoply
- Created: 2022-02-17T05:28:39.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T07:31:53.000Z (over 1 year ago)
- Last Synced: 2025-03-10T16:01:01.174Z (about 1 year ago)
- Topics: accordion, collapse, dropdown, toggle, typescript, vanilla
- Language: TypeScript
- Homepage: https://panoply.github.io/relapse/
- Size: 2.35 MB
- Stars: 20
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Relapse
An [A11y](https://www.a11yproject.com/) compliant, full featured, lightweight (3kb gzip) and dependency free toggle utility for collapsible accordions. Written in TypeScript and distributed in ES6 this tiny little module flaunts an extensive API for usage in modern web projects.
Visit Documentation: https://panoply.github.io/relapse
### Key Features
- Supports both semantic and sibling markup structures
- Silky smooth transitions leveraging [WAAPI](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
- Drop-in solution with no complexities, just initialize!
- A11y compliant (accessibility support) baked into the core.
- Functional and pure, no classes or prototype bullshit.
- Event dispatching with global context access and persisted instances
### Installation
The module is shipped for ESM consumption in the Browser.
```bash
pnpm add relapse
```
# Usage
Relapse requires initialization to function. The selector and option parameters are completely optional.
```js
import relapse from 'relapse';
const toggle = relapse('.selector', {
persist: false, // Whether or not a fold should always be expanded
multiple: false, // Whether or not multiple folds can be expanded
unique: false, // Whether or not instance is unique
schema: 'data-relapse', // Custom data attribute reference
fold: {
easing: 'ease-in-out', // The animation easing to apply
duration: 200, // Duration of the fold content transition
},
fade: {
duration: 120, // Duration of the fold content transition
transition: 'linear', // The easing effect to apply when fading content
},
classes: {
opened: 'opened', // The class to use for opened button
expanded: 'expanded', // The class to use on expanded fold
disabled: 'disabled' // The class to use for disabled fold
}
});
```