User-friendly Accordion Engine With jQuery - Accrdion.js

A semantic, user-friendly, fully configurable, highly customizable, and jQuery powered accordion engine for the web.

More Features:

• Allows to open the first accordion panel on page load.
• Configurable open/close animations.
• Automatically scrolls the page to the current accordion panel when opened.

How to use it:

1. The required HTML structure for the accordion.

• .my-accordion: accordion wrapper
• .accrdion-entry: accordion header
• .accrdion-content: accordion content

<div class="my-accordion">
  <article class="accrdion-entry">
    <header class="accrdion-header">
      Accordion Header 1
    </header>
    <div class="accrdion-content">
      <p>Accordion Content 1</p>
      </div>
  </article>
  <article class="accrdion-entry">
    <header class="accrdion-header">
      Accordion Header 2
    </header>
    <div class="accrdion-content">
      <p>Accordion Content 2</p>
      </div>
  </article>
  <article class="accrdion-entry">
    <header class="accrdion-header">
      Accordion Header 3
    </header>
    <div class="accrdion-content">
      <p>Accordion Content 3</p>
      </div>
  </article>
  ...
</div>

2. Download the plugin and put the accrdion.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/accrdion.js"></script>

3. Call the function on the top container to initialize the accordion.

$(function(){
  $('.my-accordion').accrdion();
});

4. The plugin provides no default CSS styles here. As a result, you can customize the appearance of the accordion using your own CSS.

my-accrdion {
  background-color: #fafafa;
}

.accrdion-header {
  background-color: #222;
  border-bottom: 1px solid #fafafa;
  color: #fff;
  cursor: pointer;
  padding: .5rem 1rem;
  font-size: 1.5rem;
}

.accrdion-content {
  padding: .5rem 1rem;
}

5. Determine whether to open the first item on page load. Default: true.

$('.my-accordion').accrdion({
  openFirstByDefault: false 
});

6. Determine whether to close all others when or open/close the current item. Default: 'single'.

$('.my-accordion').accrdion({
  displayStyle: 'any'
});

7. Customize the animation speed in milliseconds. Default: 400.

$('.my-accordion').accrdion({
  toggleSpeed: 500
});

8. Determine whether to scroll to the top of the current item. Default: true.

$('.my-accordion').accrdion({
  scrollToActive: true,
  scrollSpeed: 500, 
});

---

This awesome jQuery plugin is developed by codebyksalting. For more Advanced Usages, please check the demo page or visit the official website.