1.0.6 • Published 3 years ago
@rickycourtes/accordion v1.0.6
Accordion
Lightweight, fully accessible accordions!
Install
Download
CSS:
- accordion.min.css minified, or
- accordion.css un-minified
JavaScript:
- accordion.min.js minified, or
- accordion.js un-minified
CDN
Link directly to the Accordion files on unpkg.
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@rickycourtes/accordion/dist/accordion.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/@rickycourtes/accordion/dist/accordion.min.js"></script>
Package Managers
Install with npm: npm install @rickycourtes/accordion
Usage
Accordion works with a container element and a set of child cell elements
<div class="accordion">
<div class="accordion_item">
<button class="accordion_header">
<div class="accordion_header__label">Accordion Label</div>
</button>
<div class="accordion_panel">
<div class="accordion_panel_wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum rhoncus porta.</p>
</div>
</div>
</div>
<div class="accordion_item">
<button class="accordion_header">
<div class="accordion_header__label">Accordion Label</div>
</button>
<div class="accordion_panel">
<div class="accordion_panel_wrap">
<p>Aliquam ut neque congue, dapibus sed, lacinia neque. Aliquam eleifend congue malesuada eget.</p>
</div>
</div>
</div>
</div>
Options
Initiate with Vanilla JavaScript
You can use Accordion with Vanilla JS by calling new Accordion()
. The Accordion()
constructor accepts an options object where you can specify the selector and other options.
var accordion = new Accordion({
selector: '.accordion', // Selector can be a string for an idividual element
singleExpand: false, // Allows only one panel to be exapnded at a time
expandOnFocus: false // Expands panels on keyboard focus
});
// OR
var elem = document.querySelector('.accordion');
var accordion = new Accordion({
selector: elem // Allows individual element to be passed instead of a string
});
Initiate with jQuery
You can use Accordion as a jQuery plugin: $('selector').accordion()
This will apply the plugin to all matching selectors with the same class.
<!-- JavaScript -->
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/@rickycourtes/accordion/dist/accordion.min.js"></script>
$('.accordion').accordion({
singleExpand: true
});