jQuery Accordion Plugin Expand all / Open one at a Time

A lightweight, modern and easy to use jQuery Accordion plugin that lets you create accordion with the option to expand all or open one at a time on click event.

Plugin Overview

Plugin: CM Accordion
Author: Asif Mughal
Licence: MIT Licence
Published: April 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 7 KB

How to Use jQuery CM Accordion :

1. Load the jQuery and CM Accordion plugin into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

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

2. Create HTML structure for accordion like below.

<div class="wrapper">
      <div class="summary">This is summary of accordion </div>
      <div class="details"> Put your detailed contents here..</div>

3. Initialize the plugin in jQuery document ready function to active the accordion.

$(document).ready(function () {



Advance Configuration Options for CM Accordion

The following are some advance configuration options to create / customize “cm accordion”.


Define the transition speed in miliseconds for accordion sliding. Default: 300, Type: number

   slidingSpeed: 500,

Decide whether to open or close accordion on load. Default: false, Type: bool

   collapsed: true,

This option lets you to open one at a time and close other opened accordions while selecting new one. Default: false, Type: bool

   closeOther: true,
section: {}

Define the CSS style for Accordion section. Type: object

   section: {
   				margin: 10,
				overflow: 'hidden',
				boxSizing: 'border-box',
				borderRadius: 4,
summary: {}

CSS style for the visible summary / heading of the accordion. Type: object

   summary: {
				background: '#414141',
				color: '#fff',
				textAlign: 'left',
				padding: 10,
				cursor: 'pointer',
details: {}

CSS style properties for the detailed contents of the accordion. Type: object

   details: {
				background: '#ddd',
				padding: 10,


Callback function on accordion slide toggle. Default: null, type: function

   onSlideToggle: function () {
   				  //your code to execute

Be the first to comment

Leave a Reply

Your email address will not be published.


sixteen − 3 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.