Accordion

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

Version

3.1.1

Installation

npm

Install the package & import files

npm install accordion-js

import Accordion from 'accordion-js';
import 'accordion-js/dist/accordion.min.css';

CDN

Include files using CDN.

https://unpkg.com/[email protected]/dist/accordion.min.css
https://unpkg.com/[email protected]/dist/accordion.min.js

<link rel="stylesheet" href="[CDN CSS URL]">
<script src="[CDN JS URL]"></script>

Github

You can also download files from Github and attach them manually to your project.
Note: On production use files (JS and CSS) only from dist/ folder.

Usage

Include files

See the section above.

Create HTML layout

This is just an example of a layout. You can create your own HTML structure.

<div class="accordion-container">
  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

Initialize the module

<script>
  new Accordion('.accordion-container');
</script>

API

Examples

new Accordion(container, options)

• container - string | HTMLElement (required), selector of accordion container
• options - object (optional), accordion options

// Default options
new Accordion('.container-first');

// User options
new Accordion('.container-second', {
  duration: 400,
  showMultiple: true,
  onOpen: function(currentElement) {
    console.log(currentElement);
  }
});

// Define several accordions with the same options (pass an array with selectors)
new Accordion(['.container-first', '.container-second'], {});

// or pass an array with HTMLElements
const accordions = Array.from(document.querySelectorAll('.accordion-container'));
new Accordion(accordions, {});

// Detach events
const accordion = new Accordion('.container-first');
accordion.detachEvents();

Options

Methods

v3 Release Info

There have been a lot of changes to the API in version 3.0.0, so if you are using previous versions of the accordion (2.8.0 and below), I recommend updating the package to the latest version with new structure and options.