Tiny Unobtrusive Accordion Plugin - jQuery Monica.js

monica.js is a super tiny jQuery plugin that helps you create a minimal, clean, unobtrusive accordion interface with plain JavaScript/HTML/CSS.

How to use it:

1. Markup the HTML structure for the accordion.

<div class="monica">
  <h3 class="monicaTitle">Section 1</h3>
  <div class="moniceContent">
    <p>Accordion Panel 1</p>
  </div>
  <h3 class="monicaTitle">Section 2</h3>
  <div class="moniceContent">
    <p>Accordion Panel 2</p>
  </div>
  <h3 class="monicaTitle">Section 3</h3>
  <div class="moniceContent">
    <p>Accordion Panel 3</p>
  </div>
  ...
</div>

2. Load the jQuery Monica.js plugin's files in the document.

<link href="css/monica.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="js/monica.js"></script>

3. Initialize the accordion by calling the function monica on the top container and done.

$(function(){
  $(".monica").monica();
});

4. Config the animation speed. Possible values: slower, slow, fast, faster.

$(".monica").monica({
  settings: {
    // slower, slow, fast, faster
    upTime: "fast", 
    downTime: "fast"
  }
});

5. Override the default variablesto fit your design.

:root{
  /* variables */
  --bgColor: #ececec;
  --borderColor: #bababa;
  --borderRadius: 0;
  --fontColor: #2d2d2d;
  --titleSize: 24px;
  --titleWeight: 600;
  --bodySize: 18px;
  --bodyWeight: 300;
  --contentHeight: 300px;
}

---

This awesome jQuery plugin is developed by andreasgylche. For more Advanced Usages, please check the demo page or visit the official website.