jQuery Easy Accordion Plugin – monica.js

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	monica.js
Author:	Andreas Vifert Gylche
Licence:	MIT Licence
Published:	January 19, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	5.15 KB

Demo Download

How to Use jQuery Easy Accordion Plugin

1. After downloading this project, load jQuery and monica‘s CSS and JavaScript file into your HTML document.

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

<!-- Monica CSS -->
<script src="js/monica.js"></script>

<!-- Monica JS -->
<link href="css/monica.css" rel="stylesheet" type="text/css">

2. Create HTML structure for accordion like below:

<div class="monica">
   <h3 class="monicaTitle">Your Title 1</h3>
   <div class="moniceContent">
      <p>Your detailed contents goes here.</p>
   </div>
   <h3 class="monicaTitle">Your Title 2</h3>
   <div class="moniceContent">
      <p>Your title explaination. </p>
   </div>
   <h3 class="monicaTitle">Accodion Ttle 3</h3>
   <div class="moniceContent">
      <p> Details here.</p>
   </div>
</div>

Tip for Beginners:In the above HTML code, place your accordion title / question between <h3 class="monicaTitle"> tag. Similarly, add the detailed contents in <div class="moniceContent">.

3. Finally, initialize the plugin in jQuery document ready function.

$(document).ready(function() {
	
   $(".monica").monica();

});

4. To set the custom speed for slide up and down, use the following syntax.

$(".monica").monica({

            settings: {
                upTime: "slow",
                downTime: "slow"
            }
		
	});

The Possible options for speed are “slow” and “fast”. You can also set your custom speed in numbers (milliseconds), like:

settings: {
                upTime: 500,
                downTime: 600,
            }

Asif Mughal

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.