Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fgm/accordion
A tiny VanillaJS accordion library
https://github.com/fgm/accordion
accordion vanilla-javascript vanilla-js
Last synced: about 2 months ago
JSON representation
A tiny VanillaJS accordion library
- Host: GitHub
- URL: https://github.com/fgm/accordion
- Owner: fgm
- License: mit
- Created: 2013-06-09T09:13:35.000Z (over 11 years ago)
- Default Branch: main
- Last Pushed: 2023-08-08T14:18:54.000Z (over 1 year ago)
- Last Synced: 2024-10-19T16:28:44.449Z (2 months ago)
- Topics: accordion, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# accordion
A tiny VanillaJS Accordion library.
Should work on all current 2020 browsers.
## Usage
- Prepare your markup as a plain HTML Definition List with class `accordion`.
- Link your version of `accordion.css` to it, adjusting as needed.
- Load `domready.js` and `accordion.js` in your page, or use your own `DOMready`
library
- Instantiate the accordion as:```ecmascript 6
domReady(() => {
const el = new WofAccordion(window);
if (!el.isValid) {
return;
}
window.wofAccordion = el; // Optional: convenient for debug.
});
```Only a single Accordion will work on any given page.
## Markup
Accordion uses a smaller set of classes than its previous versions.
The expected structure is a plain HTML Definition List with class `accordion`:
- pane header
- pane item
- pane item
- ...
- ...
At most one item may have the `accordion-active` class at the same time, and
should not contain a link, as it represents the current page.
## Changes
- New version uses vanilla JS, no longer depending on jQuery.
- New version is 4 times smaller the the jQuery version, not even counting jQuery
itself.