Аккордеон с помощью jQuery
22.10.2016
Аккордеон на сайте на сайте приходится использовать очень часто. Самый простой вариант можно написать в несколько строчек на основе 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);