Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tomaszbujnowicz/vanilla-js-accordion

A dependency-free Vanilla JS accordion. No dependencies, no automation build tools.
https://github.com/tomaszbujnowicz/vanilla-js-accordion

accessibility accordion accordionjs js-accordion-accessible vanilla-js

Last synced: about 1 month ago
JSON representation

A dependency-free Vanilla JS accordion. No dependencies, no automation build tools.

Host: GitHub
URL: https://github.com/tomaszbujnowicz/vanilla-js-accordion
Owner: tomaszbujnowicz
Created: 2020-05-26T14:50:58.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-09-28T20:35:30.000Z (about 4 years ago)
Last Synced: 2024-10-12T23:52:36.303Z (2 months ago)
Topics: accessibility, accordion, accordionjs, js-accordion-accessible, vanilla-js
Language: JavaScript
Homepage: https://tomaszbujnowicz.github.io/vanilla-js-accordion/
Size: 16.6 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 🚀 A dependency-free Vanilla JS accordion

### Accessible Vanilla JS accordion that can be easily enabled/disabled on specific breakpoints.

Based on [Houdini](https://github.com/cferdinandi/houdini) accordion script by Chris.

### Requirements

* A browser

* No Node.js, Yarn, NPM, Webpack, Gulp, Parcel, Laravel Mix, etc...

* No dependencies, no automation build tools, nada.

### Quick start: Installation

Copy/paste and use.

### Why?

I was looking for an accessible Vanilla JS accordion that could be easily enabled/disabled on specific breakpoints. It should be accessible (ARIA attributes) and when destroyed the markup should be restored to its original state.
I didn't find 100% match but I found excellent Houdini accordion script written by Chris that was very close.

**Changes comparing to the original script:**

* Smooth height animation instead of basic display none/block
* Fix the destroy function so it works properly
* Init/destroy accordion on specific breakpoints using JS resize with debounce function

**For the demo purpose we have the following setup:**

* Accordion is enabled for 768px and below and 1200px and above
* Breakpoints can be easily customized in the theme
* CSS: Autoprefixer online settings: last 2 versions
* Resize to see it in action

## Kudos 👏

All credits should go to [Chris](https://github.com/cferdinandi/houdini) since he wrote Houdini and I only slightly modified it to fit my needs.