Modern Smooth Accordion In Pure JavaScript – accordion-init

Category: Accordion , Javascript | August 22, 2018
Views Total:3,349 views
Official Page:Go to website
Last Update:August 22, 2018


Modern Smooth Accordion In Pure JavaScript – accordion-init


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 class="panel">
    <div class="heading">2. Definition</div>
    <div class="content">
      Content 2
  <div class="panel">
    <div class="heading">3. Definition</div>
    <div class="content">
      Content 3

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

You Might Be Interested In:

Leave a Reply