0.1.3 • Published 5 years ago
@hiro0218/accordion.js v0.1.3
@hiro0218/accordion.js
install
npm install -D @hiro0218/accordion.js
usage
HTML
Opening and closing moves independently.
<div data-accordion>
<h2 data-accordion-header aria-expanded="false">TITLE</h2>
<div data-accordion-container>
CONTENTS
</div>
</div>
Opening and closing interlocks.
<div data-accordion="alone">
<h2 data-accordion-header aria-expanded="false">TITLE</h2>
<div data-accordion-container>
CONTENTS
</div>
</div>
CSS
[data-accordion] {
[data-accordion-header] {
cursor: pointer;
user-select: none;
}
[data-accordion-container] {
overflow-y: hidden;
max-height: 0;
transition: max-height 0.6s ease;
}
// close
[aria-expanded="false"] {}
// open
[aria-expanded="true"] {
& ~ [data-accordion-container] {
max-height: 200vh;
}
}
}
JS
import Accordion from '@hiro0218/accordion.js';
new Accordion();