Generate SEO-friendly Accordions From HTML Lists - accordable.js

accordable.js is a lightweight (~2kb minified) jQuery plugin to generates a responsive, semantic, SEO-friendly accordion component from a normal HTML unordered list. Ideal for FAQ systems or glossaries.

More features:

• Cross-browser and easy to use.
• Allows to specify which panel to be opened on page load.
• Smooth open/close animations.
• Easing functions.
• Callback functions.

How to use it:

1. Load the minified version of the accordable.js plugin after loading jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.accordable.js"></script>

2. Load the jQuery easing plugin for extra easing functions (OPTIONAL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3. Create an HTML unordered list for the accordion system.

<ul id="accordable-example" class="accordable">
  <li>
    <span>Accordion Header 1</span>
    <div>
      <p>Accordion Panel 1</p>
    </div>
  </li>
  <li>
    <span>Accordion Header 2</span>
    <div>
      <p>Accordion Panel 2</p>
    </div>
  </li>
  <li>
    <span>Accordion Header 3</span>
    <div>
      <p>Accordion Panel 3</p>
    </div>
  </li>
  ...
</ul>

4. Generate a default accordion by calling the function on the HTML list.

(function(){

  $('#accordable-example').accordable();

})();

5. Apply your own CSS styles to the accordion.

.accordable {
  margin: 0;
  padding: 0;
}

.accordable li:before {
  content: '';
  padding: 0;
}

.accordable .accordable-panel {
  background-color: #f0f0f0;
  margin-bottom: 5px;
}

.accordable .accordable-heading {
  background-color: #45b29d;
  color: #FFF;
  padding: 10px 25px;
}

.container .accordable .accordable-expander {
  padding: 0 25px;
}

6. Specify which accordion panel should be opened on page load. Default: [].

$('#accordable-example').accordable({
  openPanel: [2]
});

7. Determine whether to open all panels on page load. Default: false.

$('#accordable-example').accordable({
  openAll: true
});

8. Determine whether to open only one panel at a time. Default: true.

$('#accordable-example').accordable({
  closeAll: false
});

9. Specify the animation speed in milliseconds. Default: 300.

$('#accordable-example').accordable({
  speed: 500
});

10. Specify the easing function. Default: swing.

$('#accordable-example').accordable({
  easing: 'easeInOutQuint'
});

11. Callback functions.

$('#accordable-example').accordable({
  // page load
  onLoad: function() {},
  
  // before toggle
  beforeToggle: function() {},
  
  // after toggle
  afterToggle: function() {}
});

---

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