Minimalist Accordion Plugin For Vanilla JavaScript

Preview:

Description:

A dead simple accordion plugin written in pure vanilla JavaScript that allows you to toggle the visibility of content panels on click.

How to use it:

Import the JavaScript file accordion.min.js into the html document.

<script src="assets/js/accordion.js"></script>

The basic HTML structure for the accordion.

<div id="accordion" class="accordion">
  <h2 id="demo1">Demo 1</h2>
  <div>
    <ul>
      <li>Text here</li>
      <li>Text here</li>
      <li>Text here</li>
    </ul>
  </div>
  <h2 id="demo2">Demo 2</h2>
  <div>
    <ul>
      <li>Text here</li>
      <li>Text here</li>
      <li>Text here</li>
    </ul>
  </div>
  <h2 id="demo3">Demo 3</h2>
  <div>
    <ul>
      <li>Text here</li>
      <li>Text here</li>
      <li>Text here</li>
    </ul>
  </div>
</div>

Done. Style the accordion in the CSS as per your needs.

#accordion {
  /* styles here */
}

#accordion .toggle-active {
  /* styles here */
}

.closed {
  display: none;
}