oncode / Handorgel
Licence: mit
Accessible W3C conform accordion written in ES6.
Stars: ✭ 239
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Handorgel
Houdini
A simple, accessible show-and-hide/accordion script.
Stars: ✭ 148 (-38.08%)
Mutual labels: a11y, accordion, vanilla-js
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-64.44%)
Mutual labels: a11y, accordion, vanilla-js
A11y accordions
ES5 ARIA Accordion Component
Stars: ✭ 108 (-54.81%)
Mutual labels: a11y, accessible, accordion
tobii
An accessible, open-source lightbox with no dependencies
Stars: ✭ 132 (-44.77%)
Mutual labels: a11y, accessible
paginas-acessiveis
Exemplo de páginas HTML acessíveis, construídas em HTML, CSS e JS puro, demostrando vários componentes interativos construídos de forma inclusiva.
Stars: ✭ 63 (-73.64%)
Mutual labels: a11y, vanilla-js
a11yAccordion
An accessible and easy to use Accordeon widget.
Stars: ✭ 37 (-84.52%)
Mutual labels: a11y, accordion
Chakra Ui
⚡️ Simple, Modular & Accessible UI Components for your React Applications
Stars: ✭ 22,745 (+9416.74%)
Mutual labels: a11y, accessible
Chakra Ui
⚡️Simple, Modular & Accessible UI Components for your React Applications
Stars: ✭ 295 (+23.43%)
Mutual labels: a11y, accessible
a11y-accordion-tabs
A script for an accessible accordion tabs component
Stars: ✭ 50 (-79.08%)
Mutual labels: a11y, accordion
Dragon Drop
Accessible drag and drop list reorder module
Stars: ✭ 385 (+61.09%)
Mutual labels: a11y, accessible
React Accessible Accordion
Accessible Accordion component for React
Stars: ✭ 610 (+155.23%)
Mutual labels: accessible, accordion
Tobi
An accessible, open-source lightbox with no dependencies.
Stars: ✭ 195 (-18.41%)
Mutual labels: a11y, accessible
Bootstrap Vue
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Stars: ✭ 13,603 (+5591.63%)
Mutual labels: a11y, accessible
handy-collapse
A pure Javascript module for accordion/collapse UI without jQuery
Stars: ✭ 23 (-90.38%)
Mutual labels: accordion, vanilla-js
tablist
WAI-ARIA tab plugin without dependencies.
Stars: ✭ 21 (-91.21%)
Mutual labels: a11y, vanilla-js
a11y-react-emoji
⚛️ An accessible Emoji component for React applications
Stars: ✭ 69 (-71.13%)
Mutual labels: a11y, accessible
Reakit
Toolkit for building accessible rich web apps with React
Stars: ✭ 5,265 (+2102.93%)
Mutual labels: a11y, accessible
Accordion
Accordion module created in pure javascript & CSS. Very useful to create FAQ lists on your website.
Stars: ✭ 94 (-60.67%)
Mutual labels: a11y, accordion
Asqatasun
Mirror of Asqatasun ---> we've moved to GITLAB https://gitlab.com/asqatasun/Asqatasun - Opensource web site analyser, used for web accessibility "a11y"
Stars: ✭ 217 (-9.21%)
Mutual labels: a11y
Sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Stars: ✭ 13,929 (+5728.03%)
Mutual labels: accessible
Handorgel
Accessible W3C conform accordion written in ES6. Handorgel
is the Swiss German name for accordion.
Features
- ARIA accessible
- Keyboard interaction
- Extensive API
- Animated collapsing
- Fully customizable via CSS
- No external dependencies
- Lightweight (~3kb minified and gziped)
Installation
Package manager
Manager | Command |
---|---|
npm | npm install handorgel |
yarn | yarn add handorgel |
CDN / Download
File | CDN |
---|---|
CSS | handorgel.css |
CSS (minified) | handorgel.min.css |
JS | handorgel.js |
JS (minified) | handorgel.min.js |
Usage
Markup
<div class="handorgel">
<h3 class="handorgel__header">
<button class="handorgel__header__button">
Title
</button>
</h3>
<div class="handorgel__content" data-open>
<div class="handorgel__content__inner">
Content openened by default
</div>
</div>
<h3 class="handorgel__header">
<button class="handorgel__header__button">
Title 2
</button>
</h3>
<div class="handorgel__content">
<div class="handorgel__content__inner">
Content closed by default
</div>
</div>
...
</div>
Note: Use the heading tags that fit into your content to output semantic markup.
CSS
Import the SASS file from your node_modules
folder to make use of the variables:
// e.g. changing opening/closing transition times
$handorgel__content--open-transition-height-time: .1s;
$handorgel__content--open-transition-opacity-time: .2s;
$handorgel__content-transition-height-time: .05s;
$handorgel__content-transition-opacity-time: .05s;
//...
@import '~handorgel/src/scss/style';
Alternatively you can just include the built CSS file inside the /lib
folder file or from the CDN.
Javascript
Initialization (with all options and their defaults):
var accordion = new handorgel(document.querySelector('.handorgel'), {
// whether multiple folds can be opened at once
multiSelectable: true,
// whether the folds are collapsible
collapsible: true,
// whether ARIA attributes are enabled
ariaEnabled: true,
// whether W3C keyboard shortcuts are enabled
keyboardInteraction: true,
// whether to loop header focus (sets focus back to first/last header when end/start reached)
carouselFocus: true,
// attribute for the header or content to open folds at initialization
initialOpenAttribute: 'data-open',
// whether to use transition at initial open
initialOpenTransition: true,
// delay used to show initial transition
initialOpenTransitionDelay: 200,
// header/content class if fold is open
headerOpenClass: 'handorgel__header--open',
contentOpenClass: 'handorgel__content--open',
// header/content class if fold has been opened (transition finished)
headerOpenedClass: 'handorgel__header--opened',
contentOpenedClass: 'handorgel__content--opened',
// header/content class if fold has been focused
headerFocusClass: 'handorgel__header--focus',
contentFocusClass: 'handorgel__content--focus',
// header/content class if fold is disabled
headerDisabledClass: 'handorgel__header--disabled',
contentDisabledClass: 'handorgel__content--disabled',
})
API
Events
Event | Description | Parameters |
---|---|---|
destroy |
Accordeon is about to be destroyed. | |
destroyed |
Accordeon has been destroyed. | |
fold:open |
Fold is about to be opened. |
HandorgelFold : Fold instance |
fold:opened |
Fold has opened. |
HandorgelFold : Fold instance |
fold:close |
Fold is about to be closed. |
HandorgelFold : Fold instance |
fold:closed |
Fold has closed. |
HandorgelFold : Fold instance |
fold:focus |
Fold button has been focused. |
HandorgelFold : Fold instance |
fold:blur |
Fold button has lost focus. |
HandorgelFold : Fold instance |
How to listen for events:
var accordion = new handorgel(document.querySelector('.handorgel'))
// listen for event
accordion.on('fold:open', (fold) => {
// ...
})
// listen for event once
accordion.once('fold:open', (fold) => {
// ...
})
// remove event listener
accordion.off('fold:open', fn)
Methods
Handorgel Class
Method | Description | Parameters |
---|---|---|
update |
Update fold instances (use if you dynamically append/remove DOM nodes). | |
focus |
Set focus to a new header button (you can also directly use the native focus() method on the button). |
target : New header button to focus (next , previous , last or first ) |
destroy |
Destroy fold instances, remove event listeners and ARIA attributes. |
Example:
var accordion = new handorgel(document.querySelector('.handorgel'))
// destroy
accordion.destroy()
HandorgelFold Class
Method | Description | Parameters |
---|---|---|
open |
Open content. |
transition : Whether transition should be active during opening (default: true ). |
close |
Close content. |
transition : Whether transition should be active during closing (default: true ). |
toggle |
Toggle content. |
transition : Whether transition should be active during toggling (default: true ). |
disable |
Disable fold. | |
enable |
Enable fold. | |
focus |
Set focus to fold button. | |
blur |
Remove focus from fold button. | |
destroy |
Remove event listeners and ARIA attributes. |
Example:
var accordion = new handorgel(document.querySelector('.handorgel'))
// close first fold
accordion.folds[0].close()
Browser compatibility
- Newest two browser versions of Chrome, Firefox, Safari and Edge
- IE 10 and IE 11
Development
-
npm run build
- Build production version of the feature. -
npm run demo
- Build demo of the feature, run watchers and start browser-sync. -
npm run test
- Test the feature.
License
© 2018 Manuel Sommerhalder Released under the MIT LICENSE
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].