jQuery

【jQuery】シンプルで軽量でカスタマイズ可能なアコーディオンプラグインLILO ACCORDION

April 8, 2018
LILO ACCORDION

LILO ACCORDIONはアコーディオンを実装するシンプルなjQueryプラグイン。

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>

Linque a folha de estilo

headタグの中にlilo-accordion.cssを追加します。

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

Adicione o script do plugin

jQueryを追加し、bodyタグを閉じる前にjquery.lilo.accordion.js

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="dist/js/jquery.lilo.accordion.min.js"></script>

Inicialize o accordion

アコーディオンを初期化する

$(document).ready(function(){
  $('.your-class').liloAccordion({
    setting-name: setting-value
  });
});

MIT