Super simple, accessible, content accordion.
The instructions below are for installing Super Simple Accordion with NPM and using your favorite bundler to import.
- To add Super Simple Accordion using NPM
$ npm install super-simple-accordion
You will need to import the css into your project entry file.
import 'super-simple-accordions/dist/css/accordions.min.css';In your project include the following markup.
<div class="accordion">
<h2 class="accordion__title">
What is an accordion?
</h2>
<div class="accordion__panel">
<p>
Accordions are useful when you want to toggle between hiding and showing large amounts of content.
</p>
<p>
Look at all of this beautiful content!
</p>
<p>
It all seems so gratuitous but ohhhhh so needed. I love hearing myself talk (type?)!
</p>
</div>
</div>
<div class="accordion">
<h2 class="accordion__title">
Who is involved?
</h2>
<div class="accordion__panel">
<p>Accordions are useful when you want to toggle between hiding and showing large amounts of content.</p>
</div>
</div>This is just some example markup and can be changed to fit your needs. You will just need these three elements:
- A container for your accordion with the class
.accordion. - A header with the class
.accordion__title. - A container for the content with the class
.accordion__panel
If you want an accordion to be opened by default add the following data attribute in the outer accordion container.
<div class="accordion" data-expanded="true">Below are the default options available. Only include the ones you plan to change. If you do change the class names makes sure to update your CSS accordingly.
In your entry file:
import {SuperSimpleAccordions} from 'super-simple-accordions';
if (document.querySelector(".accordion")) {
const accordions = new SuperSimpleAccordions('.accordion', {
// ALL available options
// Accordion parts
accordionClass: 'accordion',
headerClass: 'accordion__title',
contentClass: 'accordion__content',
panelClass: 'accordion__panel',
//Whether to add the hidden attribute to the accordion content
hidden: true,
// Toggle Button
toggleBtnClass: 'accordion__toggle',
// Toggle all other accordions closed when one is opened
toggleOthers: false,
// Icons
icons: true, // true or false
iconsClass: 'accordion__icon',
iconsSymbol: 'plus-minus', // arrow or plus-minus
iconsPosition: 'left', // right or left
// Expand All features
expandAllBtn: true, // true or false
expandAllClass: 'accordion__toggle-all',
expandAllContainerClass: 'accordion__toggle-all-container',
expandSelectClass: 'expanded',
expandAllOpenText: 'Expand All',
expandAllCloseText: 'Collapse All',
expanded: false, // accordions collapsed by default but an be expanded
})
}Download or clone the project - Github repo
$ npm install
Open up accordions.js in the src/js directory and customize to your liking.
$ npm run prod
This will create a file named accordions.js in the dist directory.
Super Simple Accordion works in all modern browsers.
- Include Jest unit testing
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent