Simple Flexible Accordion Plugin - jQuery Lilo Accordion
File Size: | 8.3 KB |
---|---|
Views Total: | 2257 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.