🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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


Documentation

Lilo Accordion

Plugin para accordion em jQuery. Simples, leve e personalizável.

Como usar?

Monte a estrutura

<div class="your-class">   <div class="lilo-accordion-control">Controle 1</div>   <div class="lilo-accordion-content">Conteúdo 1</div>   <div class="lilo-accordion-control">Controle 2</div>   <div class="lilo-accordion-content">Conteúdo 2</div>   <div class="lilo-accordion-control">Controle 3</div>   <div class="lilo-accordion-content">Conteúdo 3</div> </div> 

Mova o lilo para o projeto

Linque a folha de estilo

Exemplo:

<link rel="stylesheet" href="css/lilo-accordion.min.css"> 

Adicione o script do plugin

Exemplo:

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

Inicialize o accordion

Exemplo:

<script>   $('.your-class').liloAccordion(); </script> 

Configurações

Manter apenas um item aberto

Apenas um item do accordion ficará aberto

Parâmetro: onlyOneActive Tipo: boolean Padrão: true 

Exemplo:

$('.your-class').liloAccordion({   onlyOneActive: true }); 

Deixar o primeiro item aberto

Ao carregar a página o primeiro item do accordion já vem aberto

Parâmetro: initFirstActive Tipo: boolean Padrão: true 

Exemplo:

$('.your-class').liloAccordion({   initFirstActive: true }); 

Desativar o plugin

Ideal para sites que precisam do accordion no mobile e não no desktop

Parâmetro: destructor Tipo: boolean Padrão: false 

Exemplo:

$('.your-class').liloAccordion({   destructor: false }); 

Ocultar os controles

Este item funciona se o plugin accordion estiver desativado

Parâmetro: hideControl Tipo: boolean Padrão: false 

Exemplo:

$('.your-class').liloAccordion({   hideControl: false }); 

Fechar o atual e abrir o próximo

Ao clicar no controle do item aberto, fecha o item atual e abre o próximo

Parâmetro: openNextOnClose Tipo: boolean Padrão: false 

Exemplo:

$('.your-class').liloAccordion({   openNextOnClose: false }); 

Acesse nosso site

Lilo Acordion

Licença

MIT License (MIT)

Copyright © 2018 Alex Fabiano Ricioli


You May Also Like