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 Preview
How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
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 }, }); |
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.