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">
   <section>
      <div class="summary">This is summary of accordion </div>
      <div class="details"> Put your detailed contents here..</div>
   </section>
</div>

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

$(document).ready(function () {

	$(".wrapper").cmAccordion();


});

Advance Configuration Options for CM Accordion

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

slidingSpeed

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

$(".wrapper").cmAccordion({
   slidingSpeed: 500,
});
collapsed

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

$(".wrapper").cmAccordion({
   collapsed: true,
});
closeOther

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

$(".wrapper").cmAccordion({
   closeOther: true,
});
section: {}

Define the CSS style for Accordion section. Type: object

$(".wrapper").cmAccordion({
   section: {
   				margin: 10,
				overflow: 'hidden',
				boxSizing: 'border-box',
				borderRadius: 4,
			}
});
summary: {}

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

$(".wrapper").cmAccordion({
   summary: {
				background: '#414141',
				color: '#fff',
				textAlign: 'left',
				padding: 10,
				cursor: 'pointer',
			}, 
});
details: {}

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

$(".wrapper").cmAccordion({
   details: {
				background: '#ddd',
				padding: 10,

			},
});
onSlideToggle

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

$(".wrapper").cmAccordion({
   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...