Ultra Tiny Accordion Plugin For jQuery - Accordiom

Accordiom is a super tiny (~1.8kb minified) jQuery accordion plugin that features configurable animation speed, auto closing, callback functions, and much more.

The plugin is designed to provide a basic accordion functionality for sectioned content (e.g. FAQ system), while leaving the styling up to you.

How to use it:

1. Download & unzip the plugin and then insert the JavaScript file accordiom.min.js after jQuery library.

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

2. Insert accordion headers together with related accordion panels into the web page.

<div id="accordion-demo">

  <div class="accordionButton"><h2>What is jQuery?</h2></div>
  <div class="accordionContent">
    <p>jQuery is a JavaScript library (NOT A FRAMEWORK) created for faster, easier and cross-browser web design.</p>
  </div>

  <div class="accordionButton"><h2>What Is jQuery Slim Build?</h2></div>
  <div class="accordionContent">
    <p>The slim build of jQuery is introduced in the jQuery 3.0 final release that is created to reduce the jQuery size and improve the page load speed.</p>
  </div>

  <div class="accordionButton"><h2>Who Are Using jQuery?</h2></div>
  <div class="accordionContent">
    <p>A study shows that jQuery is used by 74.1% of all the websites (July 2019).</p>
  </div>

</div>

3. Call the function on the top container and done.

$(function(){
  $('#accordion-demo').accordiom();
});

4. Apply your own CSS styles to the accordion.

#accordion-demo {
  /* styles here */
}

.accordionContent { 
  /* styles here */
}

.accordionButton {
  /* styles here */
}

5. Override the default animation speed. Set to 0 to disable the animation.

$('#accordion-demo').accordiom({
  speed: 1000
});

6. Determine whether to open the first accordion panel on page load. Default: true.

$('#accordion-demo').accordiom({
  showFirstItem: true
});

7. Determine if only one accordion panel is open at a time. Default: true.

$('#accordion-demo').accordiom({
  autoClosing: true
});

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

$('#accordion-demo').accordiom({
  openAll: false
});

9. Determine whether to place the accordion panels above the accordion headers. Default: false.

$('#accordion-demo').accordiom({
  buttonBelowContent: false
});

10. Callback functions available.

$('#accordion-demo').accordiom({
  beforeChange: function () {},
  afterchange: function () {},
  onLoad: function () {}
});

11. Toggle the accordion programmatically.

// open all panels
$().accordiom.openAll('#accordion-demo');

// close all panels
$().accordiom.closeAll('#accordion-demo');

// open accordion panel 3
$().accordiom.openItem('#accordion-demo', 2);

Changelog:

v0.5.1 (2020-06-10)

• Bugfix

---

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