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">
   <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
			},
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*