A simple and accessible vanilla js accordion plugin (<1kb minifed and gzipped)
NPM
npm install fisarmonica --saveInclude css and js files
<link rel="stylesheet" media="screen" href="<path-to-lib>/fisarmonica.css" />
<script src="<path-to-lib>/fisarmonica.js"></script>CDN
Be sure to use the latest version
<link
rel="stylesheet"
media="screen"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fisarmonica.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fisarmonica.min.js"></script>Prepare the base markup
<dl data-fisarmonica>
<dt>
<button>Accordion Title 1</button>
</dt>
<dd>
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.
</dd>
<dt>
<button>Accordion Title 2</button>
</dt>
<dd>
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.
</dd>
<dt>
<button>Accordion Title 3</button>
</dt>
<dd>
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.
</dd>
</dl>Initialize the plugin
var fisarmonica = new Fisarmonica();Type: String
Default value: [data-fisarmonica]
The root element selector
Type: Boolean
Default value: false
If set to true all the panels will remain open
Type: Object
Default value:
{
/* 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
You can also pass your own custom properties as values, to match your site settings
fisarmonicaButtonBackgroundFocus: 'var(--myCustomVar)'
// 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]);// 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]);// 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]);// 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]);EnterorSpace= Expands/Collapses PanelTab= Move to next focusable elementShift Tab= Move to previous focusable element↑ ↓= Cycle elements when focusedHome= Focus first elementEnd= Focus last element
fisarmonica means accordion in italian 😉