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: January 18, 2024
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

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...