Minimalist Smooth Content Toggle Plugin For jQuery - CM Accordion

CM Accordion is an extremely lightweight (less than 1kb) yet configurable and semantic jQuery content toggle/accordion plugin for saving vertical space of the webpage.

Ideal for the FAQ system that presents multiple sections of content without scrolling.

How to use it:

1. Insert the CM Accordion Js after loading the latest jQuery library.

<!-- jQuery -->
<script src="/path/to/jquery.min.js"></script>
<!-- CM Accordion Js -->
<script src="/path/to/jquery.cm.accordion.min.js"></script>

2. Define the summaries and details following the markup structure as follows:

<div class="myAccordion">
  <section>
    <div class="summary"> Question 1 </div>
    <div class="details"> Answer 1 </div>
  </section>
  <section>
    <div class="summary"> Question 2 </div>
    <div class="details"> Answer 2 </div>
  </section>
  <section>
    <div class="summary"> Question 3 </div>
    <div class="details"> Answer 3 </div>
  </section>
  ...
</div>

3. Call the plugin on the top container. That's it.

$(function(){
  $(".myAccordion").cmAccordion();
});

4. Determine whether to close the active accordion details when opening a new one. Default: false.

$(".myAccordion").cmAccordion({
  closeOther: true
});

5. Customize the animation speed when toggling the accordion. Default: 300.

$(".myAccordion").cmAccordion({
  slidingSpeed: 300
});

6. Determine whether to close all the accordion details on page load. Default: true.

$(".myAccordion").cmAccordion({
  collapsed: false
});

7. Customize the styles of the accordion summaries and details.

$(".myAccordion").cmAccordion({
  section: {
    margin: 10,
    overflow: 'hidden',
    boxSizing: 'border-box',
    borderRadius: 4,
  },
  summary: {
    background: '#414141',
    color: '#fff',
    textAlign: 'left',
    padding: 10,
    cursor: 'pointer',
  },
  details: {
    background: '#ddd',
    padding: 10,
  }
});

8. Execute a function on toggle.

$(".myAccordion").cmAccordion({
  onSlideToggle: function () {
    // do something
  }
});

About Author:

Author: Asif Mughal

Website: https://www.codehim.com/

---

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