Create an Accordion Plugin in Pure JavaScript

Easy Accordion is a very simple accordion JavaScript library that enables you to switch the visibility of block content by clicking on its header.

How to make use of 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 required JavaScript file easy-accordion.min.js on the web 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 individual types to the accordion.

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

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

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

5. Enable a selected accordion block to be seen on the web page load utilizing 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.

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

7. Apply customized classes to the activated accordion block.

var myAcc = new EasyAccordion({
    triggerActiveClass: "active-title",
    contentActiveClass: "active-content"
});
.active-title {
  /* styles here */
}

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

Easy Accordion Plugin/Github


See Demo And Download

Official Website(farhanhalai30): Click Here

This superior jQuery/javascript plugin is developed by farhanhalai30. For extra Advanced Usage, please go to the official website.

Share