Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/signalkuppe/fisarmonica
A simple and accessible vanilla js accordion plugin
https://github.com/signalkuppe/fisarmonica
accessible accessible-accordions accordion accordion-plugin vanilla-javascript vanilla-js vanillajs
Last synced: 24 days ago
JSON representation
A simple and accessible vanilla js accordion plugin
- Host: GitHub
- URL: https://github.com/signalkuppe/fisarmonica
- Owner: signalkuppe
- License: mit
- Created: 2019-10-18T12:26:04.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T22:01:15.000Z (about 2 years ago)
- Last Synced: 2024-11-22T09:17:08.074Z (about 1 month ago)
- Topics: accessible, accessible-accordions, accordion, accordion-plugin, vanilla-javascript, vanilla-js, vanillajs
- Language: HTML
- Homepage: https://fisarmonica.netlify.com/
- Size: 317 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fisarmonica
> A simple and accessible vanilla js accordion plugin (<1kb minifed and gzipped)
[DEMO](https://fisarmonica.netlify.com/)
## Installation
**NPM**
```shell
npm install fisarmonica --save
```
Include css and js files
```html
```
**CDN**
Be sure to use the latest version
```html
```
Prepare the base markup
```html
-
Accordion Title 1
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
-
Accordion Title 2
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
-
Accordion Title 3
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
```
Initialize the plugin
```js
var fisarmonica = new Fisarmonica();
```
## Options
### selector
Type: `String`
Default value: `[data-fisarmonica]`
The root element selector
### keepPanelsOpen
Type: `Boolean`
Default value: `false`
If set to true all the panels will remain open
### theme
Type: `Object`
Default value:
```js
{
/* Root element */
fisarmonicaOuterBorderWidth: '3px',
fisarmonicaInnerBorderWidth: '1px',
fisarmonicaBorderRadius: '5px',
fisarmonicaPadding: '1em',
fisarmonicaBorderColor: 'Gray',
fisarmonicaBorderColorFocus: 'SteelBlue',
fisarmonicaInnerBorderColorFocus: 'Gray',
/* Arrows */
fisarmonicaArrowWidth: '0.75em',
fisarmonicaArrowThickness: '3px',
fisarmonicaArrowColor: 'Gray',
fisarmonicaArrowColorFocus: 'SteelBlue',
fisarmonicaArrowColorDisabled: 'Gray',
/* Buttons */
fisarmonicaButtonFontFamily: 'inherit',
fisarmonicaButtonFontSize: 'inherit',
fisarmonicaButtonFontWeight: 'inherit',
fisarmonicaButtonColor: 'black',
fisarmonicaButtonColorFocus: 'black',
fisarmonicaButtonColorDisabled: 'Grey',
fisarmonicaButtonBackground: 'white',
fisarmonicaButtonBackgroundFocus: 'AliceBlue',
fisarmonicaButtondBackgroundDisabled: 'WhiteSmoke',
/* Panels */
fisarmonicaPanelFontFamily: 'inherit',
fisarmonicaPanelFontSize: 'inherit',
fisarmonicaPanelFontWeight: 'inherit',
fisarmonicaPanelColor: 'black',
fisarmonicaPanelBackground: 'white',
fisarmonicaPanelTransitionOrigin: 'top',
fisarmonicaPanelTransitionDuration: '0.15s',
fisarmonicaPanelTransitionTimingFunction: 'linear'
}
```
You can **ovveride any prop** you like. Css styles are set with custom-properties so [check browser support](https://caniuse.com/#feat=css-variables)
You can also pass your own custom properties as values, to match your site settings
`fisarmonicaButtonBackgroundFocus: 'var(--myCustomVar)'`
## Methods
### open
```js
// pass a zero-index array of panels to open ([1,2] => opens 2nd and 3rd panel)
// if no argument is passed all the panels will open
var fisarmonica = new Fisarmonica();
fisarmonica.open([1, 2]);
```
### close
```js
// pass a zero-index array of panels to close ([1,2] => closes 2nd and 3rd panel)
// if no argument is passed all the panels will close
var fisarmonica = new Fisarmonica();
fisarmonica.close([1, 2]);
```
### disable
```js
// pass a zero-index array of panels to disable ([1,2] => disables 2nd and 3rd panel)
// if no argument is passed all the panels will be disabled
var fisarmonica = new Fisarmonica();
fisarmonica.disable([1, 2]);
```
### enable
```js
// pass a zero-index array of panels to enable ([1,2] => enables 2nd and 3rd panel)
// if no argument is passed all the panels will be enabled
var fisarmonica = new Fisarmonica();
fisarmonica.enable([1, 2]);
```
## Keyboard events
- `Enter` or `Space` = Expands/Collapses Panel
- `Tab` = Move to next focusable element
- `Shift + Tab` = Move to previous focusable element
- `↑ ↓` = Cycle elements when focused
- `Home` = Focus first element
- `End` = Focus last element
fisarmonica means accordion in italian 😉
[https://it.wikipedia.org/wiki/Fisarmonica](https://it.wikipedia.org/wiki/Fisarmonica)