Плагін jQuery Accordion

На сайтах часто використовується акордеон. Цей елемент популярний і в той же час зручний. Акордеон допомагає структурувати контент і економить місце. У своїй роботі я часто використовував jQuery (і іноді використовую його зараз). І за допомогою цієї бібліотеки я написав плагін акордеону для використання в різних проектах. Плагін базується на методі slideToggle(). Можливо комусь, цей плагін також буде корисним. Тому і я опублікував код у цій замітці. Крім того, в одній із попередніх статей ми розглянули плагін jQuery табів.

HTML

<div class="accordion">
     <div class="acc-title">
          Caption 1
     </div>
     <div class="acc-cont">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius  quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati.
     </div>
      <div class="acc-title">
          Caption 2
     </div>
     <div class="acc-cont">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati.
     </div>
      <div class="acc-title">
          Caption 3
     </div>
     <div class="acc-cont">
       It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
     </div>
</div>

CSS

/* required styles */
.acc-cont {
     display: none; /*hide content*/
}

Ініціалізація

$(() => {

   $('.accordion').simpleAccordion();
     
});

Ініціалізація з параметрами

$(() => {
 
   $('.accordion').simpleAccordion({
     'title' : '.othertitle',
     'content': '.othercontent', 
     'cb': callbackFunction, 
     'speed': 500 
   });
      
});

Код плагіна

$.fn.simpleAccordion = function(options) {

  const settings = $.extend({
    'title': '.acc-title',
    'content': '.acc-cont',
    'cb': '',
    'speed': 400
  }, options);

  const accTitle = $(this).find(settings.title);

  accTitle.on('click', function() {
    if (!$(this).next().is(':visible')) {
      $(settings.content).slideUp(settings.speed);
      $(settings.title).removeClass('active');
    }
    $(this).next().stop().slideToggle(settings.speed);
    $(this).toggleClass('active');
    if (settings.cb) {
      settings.cb();
    }
  });
};

Ви можете побачити приклад використання плагіна jQuery на Codepen: https://codepen.io/igorrybalko/pen/EaYNyWx