https://github.com/hiro0218/accordion.js
https://github.com/hiro0218/accordion.js
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hiro0218/accordion.js
- Owner: hiro0218
- Created: 2019-07-09T09:56:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-14T04:52:36.000Z (over 6 years ago)
- Last Synced: 2025-03-18T03:34:10.590Z (about 1 year ago)
- Language: HTML
- Homepage: https://ok1k3.csb.app/
- Size: 15.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @hiro0218/accordion.js
## install
```
npm install -D @hiro0218/accordion.js
```
## usage
### HTML
```html
TITLE
CONTENTS
```
### CSS
```scss
[data-accordion] {
[data-accordion-header] {
cursor: pointer;
user-select: none;
}
[data-accordion-container] {
overflow-y: hidden;
max-height: 0;
transition: max-height 0.1s linear;
}
// close
[aria-expanded="false"] {}
// open
[aria-expanded="true"] {
& ~ [data-accordion-container] {
max-height: 200vh;
transition: max-height 0.6s ease;
}
}
}
```
### JS
```js
import Accordion from '@hiro0218/accordion.js';
new Accordion();
```
```js
// Opening and closing moves independently.
new Accordion(document.querySelectorAll(".accordion-default [data-accordion]"));
// Opening and closing interlocks.
new Accordion(
document.querySelectorAll(".accordion-interlocking [data-accordion]"),
true
);
```