Simple Flexible Accordion Plugin - jQuery Lilo Accordion

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.

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.

  • Publication date: 13.04.2018
  • Source