Very light and simple module. With the module you can create accordion on your website, useful for creating FAQ lists.
Browsers support: All modern browsers, Internet Explorer 10+

2.8.0

Install the package & import files

npm install accordion-js

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

Include files using CDN.

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

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

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.

<link rel="stylesheet" href="accordion.min.css"> 
<script src="accordion.min.js"></script>  

See the section above.

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-q" tabindex="0">Lorem ipsum</h2>
    <div class="ac-a">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-q" tabindex="0">Lorem ipsum</h2>
    <div class="ac-a">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-q" tabindex="0">Lorem ipsum</h2>
    <div class="ac-a">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
    </div>
  </div>
</div>

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

new Accordion(container, options)

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

You can initialize more than one accordion per page.

<script>
  // 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();
</script>

targetClass - If an element has the targetClass class and is inside box with qClass class, then when you click on it, the list will be expanded. Otherwise expanded will not take place and clicked element will take you to the top of the page.

onToggle - Function is not working on initiated element, when showItem is set to true.