Аккордеон с помощью jQuery

28.04.19

Аккордеон на сайте на сайте приходится использовать очень часто. Самый простой вариант можно написать в несколько строчек на основе slideToogle(). Данный вариант не стал исключением. Для удобства был завернут в плагин jQuery.

Библиотека jQuery должна быть подключена выше скрипта аккордеона.

HTML

<!--Installation-->
<head>
     <script src="/jquery.js"></script>
     <script src="/simpleAccordion.js"></script>   
</head>
<!-- //-->
<div class="accordion-block">
     <div class="title-acc">
          Caption 1
     </div>
     <div class="content-acc">
          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="title-acc">
          Caption 2
     </div>
     <div class="content-acc">
          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="title-acc">
          Caption 3
     </div>
     <div class="content-acc">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati. 
     </div>
</div>

CSS

.content-acc{
     display: none; /*hide contents*/
}
.content-acc.active{
     display: block; /*display active contents*/
}

Инициализация скрипта

$(function(){

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

Так же можно использовать другие селекторы вместо дефолтных. И имеется возможность вызывать callback при клике. Можно менять скорость анимации с помощью параметра speed. Значение speedпо умолчанию 400.

Инициализация с параметрами

$(function(){
 
   $('.accordion-block').simpleAccordion({
 
     'title' : '.othertitle',
     'content': '.othercontent', 
     'cb': callbackFunctionName, 
     'speed': 500 
 
   });
      
});

Код плагина

(function($){
 
    $.fn.simpleAccordion = function(options){
 
        var settings = $.extend({
            'title' : '.title-acc',
            'content': '.content-acc',
            'cb': '',
            'speed': 400
        }, options);
 
        var acctitle = $(this).find(settings.title);
 
        acctitle.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);

Демо

Caption 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati, ipsa fuga autem perferendis voluptas nesciunt quasi excepturi.
Caption 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati, ipsa fuga autem perferendis voluptas nesciunt quasi excepturi.
Caption 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati, ipsa fuga autem perferendis voluptas nesciunt quasi excepturi.
blog comments powered by Disqus