Simple Flexible Accordion Plugin - jQuery Lilo Accordion

Lilo Accordion is a simple, lightweight jQuery plugin to create a basic, responsive, customizable accordion UI while leaving the styling up to you.

How to use it:

1. Insert jQuery JavaScript library and the Lilo Accordion plugin's files into the html file.

<link rel="stylesheet" href="css/lilo-accordion.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="js/jquery.lilo.accordion.min.js"></script>

2. The basic HTML for the accordion UI.

<div class="your-class">

  <div class="lilo-accordion-control">Accordion 1</div>
  <div class="lilo-accordion-content">Content 1</div>

  <div class="lilo-accordion-control">Accordion 2</div>
  <div class="lilo-accordion-content">Content 2</div>

  <div class="lilo-accordion-control">Accordion 3</div>
  <div class="lilo-accordion-content">Content 3</div>

  ...

</div>

3. Activate the accordion plugin with default settings.

$('.your-class').liloAccordion();

4. Apply your own CSS styles to the accordion.

.lilo-accordion-control {
  
  /* accordion control styles */

}

.lilo-accordion-control.active {

  /* when active */

}

.lilo-accordion-content {

 /* accordion content styles */

}

5. Customize the accordion UI by passing the following options to the liloAccordion() function.

$('.your-class').liloAccordion({

  // opens an accordion panel at a time
  onlyOneActive: true,

  // opens the first accordion panel on load
  initFirstActive: true,

  // hides controls
  hideControl: false,

  // opens next accordion panel on close
  openNextOnClose: false 
  
});

---

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