Accordion

v3.3.4
Star -
Fork -
Download from GitHub

Installation

You can download files from GitHub or install through NPM:

npm install accordion-js
Copied!

or include files from CDN:

https://unpkg.com/accordion-js@3.3.4/dist/accordion.min.js

https://unpkg.com/accordion-js@3.3.4/dist/accordion.min.css

Description

A simple, lightweight accesible accordion module created in pure javascript. You can create multiple accordions on one page and set different options for each. Visit the Github Page to see the module API.

License

Accordion is licensed under the MIT license

Further reading

Examples

Basic Accordion

new Accordion('.accordion-container');

Accordion is lightweight and accessible module with an extensible API. With the module you can create accordion on your website, useful especially for creating FAQ lists.

Accordion is licensed under the MIT license. The package is and will always be FREE.

You can install package using npm, attach files using CDN and you can also download files from Github and attach them manually to your project.

Multiple Accordions

new Accordion(['.first-accordion', '.second-accordion'], { ¶openOnInit: [0], ¶collapse: false });

Quisque iaculis nunc mauris. Phasellus ullamcorper pulvinar lorem sed scelerisque. Quisque cursus viverra risus et iaculis. Suspendisse hendrerit mi et enim vulputate, vel interdum lacus pulvinar. Aliquam sit amet nulla ac eros scelerisque porta ut vel nisi.

Fusce vehicula, libero vitae faucibus fermentum, est orci ultricies nunc, sed euismod ex ante id nunc. Sed luctus, odio quis sagittis aliquam, ipsum ipsum sollicitudin ante, in commodo nulla elit nec tellus. Curabitur consectetur at augue molestie lobortis.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus nulla tenetur numquam labore maxime excepturi vero corporis accusantium explicabo aut in facilis, eligendi, necessitatibus quasi?

Sed quis dui mi. Donec volutpat, tellus eget gravida dapibus, justo turpis pellentesque metus, nec lobortis lacus magna eu ligula. Aliquam sodales sapien at dui egestas, eu hendrerit sapien hendrerit.

Nested Accordions

new Accordion('.first-accordion'); new Accordion('.second-accordion');

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam ipsum quas doloribus ipsa pariatur rem quidem accusamus animi natus unde.

There are several nested panels.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Advanced

const container = document.querySelector('.accordion-container'); const accordion = new Accordion(container, { ¶showMultiple: true, ¶onOpen: (currEl) => console.log('Open!', currEl) });   const buttons = accContainer.querySelectorAll('.close-accordion-btn'); [...buttons].map((button, idx) => { ¶button.addEventListener('click', () => accordion.close(idx)); });

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam odit eos necessitatibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam velit blanditiis deserunt sapiente consequatur molestias reiciendis quos eveniet quae ea?

Tailwind Example New

Using the Tailwind doesn't require any additional config. The default classes will work fine, but be sure not to import the default CSS file.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt voluptatem beatae laudantium placeat quae deserunt, sed maiores impedit.

Quisque iaculis nunc mauris. Phasellus ullamcorper pulvinar lorem sed scelerisque. Quisque cursus viverra risus et iaculis. Suspendisse hendrerit mi et enim vulputate, vel interdum lacus pulvinar. Aliquam sit amet nulla ac eros scelerisque porta ut vel nisi.