Simple Vertical & Horizontal Accordion Plugin with jQuery - asAccordion

asAccordion is a jQuery plugin that provides a simple way to create vertical or horizontal accordions with smooth CSS3 transitions.

Features:

• Close the active panel when opening a new one.
• CSS3 powered easing effects.
• Custom animation speed.
• Custom trigger events.

TODO:

• Custom breakpoint for responsive web layout.
• Custom themes.

Basic Usage:

1. Add the jQuery library and the jQuery asAccordion plugin's JS and CSS into your document.

<link rel="stylesheet" href="css/asAccordion.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/jquery-asAccordion.js"></script>

2. Build the Html structure for a vertical accordion using Html unordered list and pass the options via data-OPTION attributes.

<ul data-direction="vertical" class="-accordion -accordion--basic -accordion--vertical">
  <li class="-accordion__panel">
    <span class="-accordion__heading">Section 1<i class="-icon -icon--right"></i></span>
    <div class="-accordion__expander">Content 1.</div>
  </li>
  <li class="-accordion__panel" > 
    <span class="-accordion__heading">Section 2<i class="-icon -icon--right"></i></span>
    <div class="-accordion__expander">Content 2.</div>
  </li>
  <li class="-accordion__panel"> 
    <span class="-accordion__heading">Section 3<i class="-icon -icon--right"></i></span>
    <div class="-accordion__expander">Content 3.</div>
  </li>
</ul>

3. Call the plugin on the set of list items.

$(document).ready(function() {
  $('.-accordion').asAccordion({
    namespace: '-accordion'
  });
});

4. You can pass the options as key/value object to $.asAccordion() method.

$(document).ready(function() {
  $('.-accordion').asAccordion({
    namespace: '-accordion'
    // accordion theme. WIP
    skin: null,

    // breakpoint for mobile devices. WIP
    mobileBreakpoint: 768,

    // initial index panel
    initialIndex: 0,

    // CSS3 easing effects.
    easing: 'ease-in-out',

    // animation speed.
    speed: 500,

    // vertical or horizontal
    direction: 'vertical',

    // jQuery mouse events. click, mousehover, etc.
    event: 'click',

    // multiple instance
    multiple: false
  });
});

Change log:

2017-09-11

• v0.2.2

---

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