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="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.

  • Publication date: 13.04.2018
  • Source