Modern Smooth Accordion In Pure JavaScript – accordion-init

Preview:

Description:

Just another PURE JavaScript solution to create a modern, smooth-sliding accordion component for your FAQ system.

How to use it:

Insert the stylesheet accordion.min.css and JavaScript accordion.min.js into the html file.

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

Add accordion headings (questions) and contents (answers) to the accordion UI.

<div class="accordion-container">
  <div class="panel">
    <div class="heading">1. Definition</div>
    <div class="content">
      Content 1
    </div>
  </div>
  <div class="panel">
    <div class="heading">2. Definition</div>
    <div class="content">
      Content 2
    </div>
  </div>
  <div class="panel">
    <div class="heading">3. Definition</div>
    <div class="content">
      Content 3
    </div>
  </div>
</div>

Initialize the accordion component and done.

var myAccordion = new Accordion('.accordion-container');

Possible accordion settings.

var accordion = new Accordion('.accordion-container',{
    // hides all answers
    hideAll: false,
    // shows all answers
    showAll: false,
    // shows the first answer
    showFirst: false,
    // panel ID you want to show at first time
    panelId: null
});