Accordion - is very simple and lightweight javascript accordion module. It is created in pure javascript & CSS. With some basic and simple steps, you can create a lightweight accordion for your website.

Features:

• It can be installed with NPM.
• Supports all modern browsers, Internet Explorer 10+
• Very easy to set up and configure.
• Active class enable on the selected item.
• Can be customized default design with CSS.

Install with npm

$ npm install accordion-js

How to use it:

1. Include the Javascript accordion.min.js at the bottom of the web page.

<script src="path/to/accordion.min.js"></script>

2. Include the CSS swiper.min.css in the header of the page.

<link rel="stylesheet" href="path/to/accordion.min.css">

3. Add the basic HTML to the page.

<div id="accordion-default" class="accordion-container">
  <div class="ac">
    <h2 class="ac-q" tabindex="0">Accordion-1</h2>
    <div class="ac-a">
      <p>Content for Accordion-1</p>
    </div>
  </div>
  <div class="ac">
    <h2 class="ac-q" tabindex="0">Accordion-2</h2>
    <div class="ac-a">
      <p>Content for Accordion-2</p>
    </div>
  </div>
  <div class="ac">
    <h2 class="ac-q" tabindex="0">Accordion-3</h2>
    <div class="ac-a">
      <p>Content for Accordion-3</p>
    </div>
  </div>
</div>

4. Initialize the plugin and we're ready to go.

new Accordion('#accordion-default');

API

// Default options
  new Accordion('.container-first');
// User options
  new Accordion('.container-second', {
    duration: 500,
    showItem: true,
    onToggle: function(currentElement, allElements) {
      console.log(currentElement);
    }
  });
// Define several accordions with the same options
  new Accordion(['.container-first', '.container-second']);
// Detach events
  var accordion = new Accordion('.container-first');
  accordion.detachEvents();

Plugin's default options:

Option	Type	Default value	Description
duration	number	600	Animation duration in ms
itemNumber	number	0	Item number which will be shown (Default first)
aria	boolean	true	Add ARIA elements to the HTML structure
closeOthers	boolean	true	Show only one element at the same time
showItem	boolean	false	Always show element that has itemNumber number
elementClass	string	'ac'	Element class
questionClass	string	'ac-q'	Question class
answerClass	string	'ac-a'	Answer class
targetClass	string	'ac-target'	Target class [Read more below]
onToggle	function	-	Function called after clicking on the element. Can take two params 1st - element that was clicked 2nd - list of all accordion elements [Read more below]
.attachEvents()	function	-	Attach events
.detachEvents()	function	-	Detach events

<div id="accordion-default" class="accordion-container">
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-1</h2>
  <div class="ac-a">
    <p>Content for Accordion-1</p>
  </div>
</div>
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-2</h2>
  <div class="ac-a">
    <p>Content for Accordion-2</p>
  </div>
</div>
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-3</h2>
  <div class="ac-a">
    <p>Content for Accordion-3</p>
  </div>
</div>
</div>

new Accordion('#accordion-default');

<div id="accordion-mulltiple-open" class="accordion-container">
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-1</h2>
  <div class="ac-a">
    <p>Content for Accordion-1</p>
  </div>
</div>
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-2</h2>
  <div class="ac-a">
    <p>Content for Accordion-2</p>
  </div>
</div>
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-3</h2>
  <div class="ac-a">
    <p>Content for Accordion-3</p>
  </div>
</div>
</div>

new Accordion('#accordion-mulltiple-open', {
  duration: 500,
  closeOthers: false,
});

<div id="accordion-show-first" class="accordion-container">
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-1</h2>
  <div class="ac-a">
    <p>Content for Accordion-1</p>
  </div>
</div>
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-2</h2>
  <div class="ac-a">
    <p>Content for Accordion-2</p>
  </div>
</div>
<div class="ac">
  <h2 class="ac-q" tabindex="0">Accordion-3</h2>
  <div class="ac-a">
    <p>Content for Accordion-3</p>
  </div>
</div>
</div>

new Accordion('#accordion-show-first', {
  duration: 500,
  showItem: true
});