✔Отзывчивый аккордеон с помощью jQuery - «Самоучитель CSS»

Представляю на ваше рассмотрение очередной вариант блоков с скрытым содержанием в стиле вертикального «аккордеона», плавно раскрывающихся по клику. В интернетах можно легко найти немало интересных решений по созданию «аккордеонов», как горизонтальных так и вертикальных. Очень популярны компактные, многоуровневые меню в стиле «аккордеон», точно так же, как и раскрывающиеся панели с скрытым контентом, работающих на jQuery или на чистом CSS3.

Не помню уже, где, когда, кому и зачем написал этот простенький плагин, да и вообще, сам ли писал. Но вот достал из пылившегося архива своих наработок, внёс некоторые поправки с учётом современных реалий веб-дизайна и получился ещё один, довольно таки надёжный инструмент для подачи информации.

Для работы «аккордеона» понадобится подключенная библиотека jQuery. Как вы помните, подключить её можно напрямую с серверов Google:

HTML

Отзывчивым, аккордеон я обозвал не просто так. Вся html-конструкция аккордеона, представляет из себя базовый div-контейнер с вложениями, которому определено максимальное значение ширины max-width: 600px; (опционально) при 100% относительно родительского блока, в котором он будет размещён, что делает аккордеон гибким при размещении в различных частях шаблона, будь то боковая панель или контейнер с основным контентом.

В примере максимально-возможную ширину выставил в 600px, которую вы всегда легко сможете изменить в ту или иную сторону, с учётом ваших потребностей.

<!-- блок аккордеон -->

CSS

Как писал выше, базовый блок аккордеона сделал, что называется «резиновым». Цветовую палитру, для оформления панелей, подобрал из состава материального дизайна от google, тренд нынче такой, понимаешь ли))). В данном примере, панели заголовков выполнены с зелёным оттенком, вы можете выбрать любой другой из состава палитры: <!--noindex-->Тынц »<!--/noindex-->

В остальном всё без особых изысков и ненужных ляповатостей.

Для параграфов

Переключатели панелей сформировал с помощью псевдоэлемента :before, выполнил в виде стрелок, сменяющих направление при активации панелей.

Коротенькие комментарии прямо в коде css, помогут вам разобраться какой селектор за что отвечает и понять в общем, что куда и зачем.

/* стили блока аккордеон */
.accordion {
width:100%;
max-width: 600px;
margin: 0 auto

/* секции аккордеона */
.accordion .accordion_item {
margin-bottom:1px;
position:relative

/* заголовки панелей аккордеона */
.accordion .title_block {
font-weight: 400;
font-size: 18px;
color: #eee;
  cursor:pointer;
background: #009688;
  padding:10px 55px 10px 15px;
-webkit-transition:all .2s linear 0;
-webkit-transition-delay:.2s 0;
transition:all .2s linear 0

/* переключатель панелей, положение вниз */
.accordion .title_block:before {
content:'';
height:8px;
width:8px;
display:block;
border:2px solid #fefefe;
  border-right-width:0;
border-top-width:0;
-ms-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
position:absolute;
right:20px;
top:18px

/* активный переключатель, положение вверх */
.accordion .active_block .title_block:before {
border:2px solid #fefefe;
  border-left-width:0;
border-bottom-width:0;
top:18px

.accordion .title_block:hover {
background: #26A69A

/* заголовок активного блока  */
.accordion .active_block .title_block {
background: #26A69A;
  color:#fefefe

/* блоки с содержанием */
.accordion .info {
display:none;
padding:10px 15px;
overflow: hidden;
background:#f7f7f7

/* параграф внутри блоков с содержанием */
.accordion .info_item {
margin-bottom:10px

/* картинки внутри аккордеона */
.accordion .info thumb {
height: auto;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

/* полноразмерная картинка */
.large-thumb {
width: 100%;
margin-bottom: 10px;

/* миниатюра слева */
.thumb-left {
width: 25%;
float:left;
margin:5px 15px 5px 0;

/* миниатюра справа */
.thumb-right {
width: 25%;
float:right;
margin:5px 0 5px 15px;

Для расширения базового функционала «аккордеона» по умолчанию, прописал отдельные стили для изображений. Картинки в секциях, вы можете отправить, как влево, так и вправо, для этого достаточно добавить тегу thumb соответствующий класс class="thumb-left" или class="thumb-right". В результате получите встроенные в текст миниатюры. Позиционирование изображений определяется через float: right и float: left соответственно.

Для полноразмерных изображений выставил 100% ширину, с отступом от нижнего края в 10px.

Значения ширины в %, обеспечивает возможность пропорционального изменения картинок, при изменении размеров базового контейнера «аккордеона». Конечно же, никто и ничто не мешает вам использовать фиксированные размеры изображений:)

jQuery

С внешним видом нашего «аккордеона» и фаршем html/css кода мы разобрались. Остаётся только всё это дело завести, т.е. сделать так, чтобы панели раскрывались и схлопывались по клику, а поможет нам в этот раз, небольшая магия jQuery. Как в этом деле обойтись исключительно средствами CSS3, можно узнать из моих предыдущих уроков: так или же вот так

И так, основную библиотеку jаvascript jQuery подключить вы надеюсь не забыли, теперь к документу html подключим небольшой, исполняемый js, через функции которого, и обеспечим надёжную движуху нашего аккордеона:

<</span>script type="text/jаvascript"<span style="color: #339933;">>
! function(i) {
var o, n;
i(".title_block").on("click", function() {
o = i(this).parents(".accordion_item"), n = o.find(".info"),
o.hasClass("active_block") ? (o.removeClass("active_block"),
n.slideUp()) : (o.addClass("active_block"), n.stop(!0, !0).slideDown(),
o.siblings(".active_block").removeClass("active_block").children(
".info").stop(!0, !0).slideUp())
)
(jQuery);

Если ничего не упустил, то на этом наверное и всё. Отзывчивый «до жути» и вполне себе автономный «аккордеон», полностью готов к работе.

Покопаться в коде можно здесь

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: