Аккордеон – удобный способ преподнести пользователю важную информацию. С помощью данного метода подачи данных (текста или картинок с текстом) можно сэкономить место на странице и при этом, максимально удобно дать пользователю разобраться в предоставляемых данных.
На сегодняшний день, конечно же, существует множество решений. Я предлагаю свое. Код написан с ноля, работает на jQuery 1.7.1+, в преимущество можно записать:
- простоту использования
- немного HTML
- мизер JS на jQuery
- возможность отобразить/скрыть все
- свернуть/развернуть элемент по нажатию на него.
jQuery код:
(function($)
{
$(document).ready(function()
{
var faqclick = $('div.faqclick');
var faqshow = $('div.faqshow');
$(faqshow).hide();
var allopen = $('div.allopen');
var aopt = $(allopen).text();
$(allopen).on("click",function(){
if((aopt) ==='Раскрыть все'){
aopt = 'Скрыть все';
$(allopen).text('Скрыть все');
$(faqshow).slideDown(400);
$(faqclick).removeClass('plus').addClass('minus');
}
else{
aopt = 'Раскрыть все';
$(allopen).text('Раскрыть все');
$(faqshow).slideUp(400);
$(faqclick).removeClass('minus').addClass('plus');
}
});
$(faqclick).each(function(i) {
$(this).on("click",function(){
if ($(faqshow[i]).css('display') == 'block') {
$(faqshow[i]).slideUp(400);
$(faqclick[i]).removeClass('minus').addClass('plus');
} else {
$(faqshow[i]).slideDown(400);
$(faqclick[i]).removeClass('plus').addClass('minus');
}
});
});
})
})(jQuery);
HTML код:
<div class="allopen btn">Раскрыть все</div>
<div class="faqclick plus">ВОПРОС</div>
<div class="faqshow">Ответ</div>
Если Вы не будете изменять JS, то постарайтесь соблюсти HTML
CSS:
.btn{display:inline-block;padding:5px 12px;font-size:13px;line-height:18px;text-align:center;vertical-align:middle;cursor:pointer;color:#fff;background:#000;border:none;-webkit-box-shadow:inset 0 0 0 #000, 0 2px 0 #E53400;-moz-box-shadow:inset 0 0 0 #000, 0 2px 0 #E53400;box-shadow:inset 0 0 0 #000, 0 2px 0 #E53400;text-transform:uppercase;}
.btn:before{content:"\e208";font-family:'IcoMoon';margin:0 5px 0 0;}.btn:hover{text-decoration:none;color:#fff;background:#e6e6e6;-webkit-box-shadow:inset 0 15px 0 #E53400;-moz-box-shadow:inset 0 15px 0 #E53400;box-shadow:inset 0 50px 0 #E53400;}
.btn,.faqclick,.faqshow{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btn,.faqclick{-webkit-transition:0.5s ease-in-out;-webkit-transition-property:all;-moz-transition:0.5s ease-in-out;-moz-transition-property:all;-o-transition-property:all; -o-transition-duration:0.5s; -o-transition-timing-function:ease-in-out;transition:all 0.5s ease-in-out;}
.faqclick{background:#f5f5f5;padding:5px;margin:3px 0 8px;cursor:pointer;border:1px solid rgba(0,0,0,.1);}
.faqclick:hover{background:#E53400;color:#fff;}
.plus:before,.minus:before{background:#ccc;border-radius:15px;font-family:'IcoMoon';content:"\2a";margin:0 5px 0 0;padding:2px;}
.minus:before{content:"\49";color:#000;}
.faqshow{margin:5px;padding:10px;background:rgba(255,255,255,.3);}
Обратите внимание, что используется API шрифта IcoMoon
<link href='https://f.inverser.pro/files/scripts/icomoon/fonts/icomoon.css' rel='stylesheet' type='text/css' />
