Аккордеон с помощью 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);