Easy Accordion In Pure JavaScript

Preview:

Description:

A dead-simple accordion JavaScript library that enables you to toggle the visibility of block content by clicking its header.

How to use it:

1. Build the HTML for the accordion.

<div id="my-accordion" class="example">
  <div class="accordion-block">
    <div class="accordion-title">Accordion 1</div>
    <div class="accordion-content">
      Accordion Content 1
    </div>
  </div>
  <div class="accordion-block">
    <div class="accordion-title">Accordion 2</div>
    <div class="accordion-content">
      Accordion Content 2
    </div>
  </div>
  ... more accordion blocks here ....
</div>

2. Load the necessary JavaScript file easy-accordion.min.js on the page.

<script src="/path/to/js/easy-accordion.min.js"></script>

3. Initialize the accordion library.

var myAcc = new EasyAccordion({
    target: "my-accordion",
    blockClass: "accordion-block",
    triggerClass: "accordion-title",
    contentClass: "accordion-content"
});

4. Apply your own styles to the accordion.

.accordion-block {
  /* styles here */
}
.accordion-title {
  /* styles here */
}
.accordion-content {
  /* styles here */
}

5. Enable a specific accordion block to be visible on page load using the ea-active-block class.

<div id="my-accordion" class="example">
  <div class="block">
    <div class="accordion-title">Accordion 1</div>
    <div class="accordion-content">
      Accordion Content 1
    </div>
  </div>
  <div class="block ea-active-block">
    <div class="accordion-title">Accordion 2</div>
    <div class="accordion-content">
      Accordion Content 2
    </div>
  </div>
  ... more accordion blocks here ....
</div>

6. Customize the transition speed. Default: 500ms.

var myAcc = new EasyAccordion({
    transitionDuration: 0.6
});

7. Apply custom classes to the activated accordion block.

var myAcc = new EasyAccordion({
    triggerActiveClass: "active-title",
    contentActiveClass: "active-content"
});

.active-title {
  /* styles here */
}
.active-content {
  /* styles here */
}