THEMETRIAL

Easy Accordion In Pure JavaScript

Author:farhanhalai30
Views Total:0 views
Official Page:Go to website
Last Update:January 11, 2021
License:MIT

Preview:

Easy Accordion In Pure JavaScript

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="https://www.cssscript.com/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 */
}


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.