Tiny Accordion Component With Vanilla JavaScript

Preview:

Description:

A tiny and configurable accordion component that can be used to toggles the visibility of a group of accordion boxes.

Features:

• Semantic and SEO-friendly.
• Configurable toggle animations.
• Custom trigger events.

How to use it:

1. Insert the necessary JavaScript and Stylesheet into the HTML document.

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

2. Create an HTML unordered list for the accordion component.

<ul class="accordion-container" id="example">
  <li class="accordion-item">
    <div class="head">
      <i></i>
      <p>Accordion Header 1</p>
    </div>
    <div class="body">
      <div class="wrapper">
        Accordion Box 1
      </div>
    </div>
  </li>
  <li class="accordion-item">
    <div class="head">
      <i></i>
      <p>Accordion Header 2</p>
    </div>
    <div class="body">
      <div class="wrapper">
        Accordion Box 2
      </div>
    </div>
  </li>
    <li class="accordion-item">
    <div class="head">
      <i></i>
      <p>Accordion Header 3</p>
    </div>
    <div class="body">
      <div class="wrapper">
        Accordion Box 3
      </div>
    </div>
  </li>
  ...
</ul>

3. Initialize the accordion component and done.

var accordion = new Accordion({
    element: "#example",
});

4. Set the active tab after init.

var accordion = new Accordion({
    element: "#example",
    activeTab: 2,
});

5. Change the default trigger event. Default: “click”.

var accordion = new Accordion({
    element: "#example",
    event: "mouseenter",
});

6. Specify the animation speed. Default: 300.

var accordion = new Accordion({
    element: "#example",
    transition: 500,
});

7. Determine whether to allow multiple accordion boxes to be opened at a time. Default: false.

var accordion = new Accordion({
    element: "#example",
    multipleTab: true,
});