JavaScript

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

22.10.2016 by igor No Comments

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

Демо:

Заголовок 1
Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям.
Заголовок 2
Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям.
Заголовок 3
Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям.

Открыть файл simpleAccordion.js

Скрипт необязательно подключать отдельным файлом "simpleAccordion.js". Можно содержимое файла скопировать в свой файл скриптов. Библиотека jQuery должна быть подключена выше скрипта аккордеона

HTML

<!--Подключаем скрипт-->
<head>
     <script src="jquery.js"></script>
     <script src="simpleAccordion.js"></script>   
</head>
<!-- //-->
<div class="accordion-block">
     <div class="title-acc">
          Заголовок 1
     </div>
     <div class="content-acc">
          Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей 
          деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. 
     </div>
      <div class="title-acc">
          Заголовок 2
     </div>
     <div class="content-acc">
          Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение 
          нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. 
     </div>
      <div class="title-acc">
          Заголовок 3
     </div>
     <div class="content-acc">
          Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение 
          нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. 
     </div>
</div>

CSS


.content-acc{
     display: none; /*скрываем содержимое*/
}
.content-acc.active{
     display: block; /*отобразим активный раздел*/
}

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

$(document).ready(function(){

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

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

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

$(document).ready(function(){

   $('.tabsblock').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);
Share: