Simple Flexible Accordion Plugin - jQuery Lilo Accordion

File Size: 8.3 KB
Views Total: 2236
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""
<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>



3. Activate the accordion plugin with default settings.


4. Apply your own CSS styles to the accordion.

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

} {

  /* when active */


.lilo-accordion-content {

 /* accordion content styles */


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


  // 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.