Very Light And Simple Javascript And CSS Accordion Module – Accordion

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: