Чуйний акордеон з допомогою jQuery

49

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

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

Отзывчивый аккордеон с помощью jQuery

Дивитися Демо

Для роботи «акордеона» знадобиться підключена бібліотека jQuery. Як ви пам’ятаєте, підключити її можна безпосередньо з серверів Google:


HTML

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

Заголовок Панелі №1

Бла-Бла-Бла.

Бла-Бла-Бла..

Заголовок Панелі №2

Бла-Бла-Бла..

Бла-Бла-Бла...

Заголовок Панелі №3

Бла-Бла-Бла..

Бла-Бла-Бла...

Заголовок Панелі №1

Бла-Бла-Бла.

Бла-Бла-Бла..

Заголовок Панелі №2

Бла-Бла-Бла..

Бла-Бла-Бла…

Заголовок Панелі №3

Бла-Бла-Бла..

Бла-Бла-Бла…

CSS

Як писав вище, базовий блок акордеона зробив, що називається «гумовим». Колірну палітру, для оформлення панелей, підібрав зі складу матеріального дизайну від google, тренд нині такий, розумієш))). В даному прикладі, панелі заголовків виконані з зеленим відтінком, ви можете вибрати будь-який інший зі складу палітри: Тынц »
В іншому все без особливих вишукувань і непотрібних ляповатостей.
Для параграфів

всередині блоків акордеона додав нижній відступ, що звичайно ж не обов’язково, справа смаку, можете використовувати по стандарту.

Перемикачі панелей сформував з допомогою псевдоэлемента :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 img {
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-img {
width: 100%;
margin-bottom: 10px;
}
/* мініатюра зліва */
.img-left {
width: 25%;
float:left;
margin:15px 5px 5px 0;
}
/* мініатюра праворуч */
.img-right {
width: 25%;
float:right;
margin:5px 0 15px 5px;
}

/* стилі блоку акордеон */
.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 img {
height: auto;
box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* повнорозмірна картинка */
.large-img {
width: 100%;
margin-bottom: 10px;
}
/* мініатюра зліва */
.img left {
width: 25%;
float:left;
margin:15px 5px 5px 0;
}
/* мініатюра праворуч */
.img right {
width: 25%;
float:right;
margin:5px 0 15px 5px;
}

Для розширення базового функціоналу «акордеона» за замовчуванням, прописав окремі стилі для зображень. Картинки в секціях, ви можете відправити, як ліворуч, так і праворуч, для цього досить додати тегу img відповідний клас class=”img left” або class=”img right”. В результаті отримаєте вбудовані в текст мініатюри. Позиціонування зображень визначається через float: right і float: left відповідно.
Для повнорозмірних зображень виставив 100% ширину, з відступом від нижнього краю 10px.
Значення ширини %, забезпечує можливість пропорційного зміни картинок, при зміні розмірів базового контейнера «акордеона». Звичайно ж, ніхто і ніщо не заважає вам використовувати фіксовані розміри зображень:)

jQuery

За зовнішнім виглядом нашого «акордеона» і фаршем html/css коду ми розібралися. Залишається тільки все це справа завести, тобто зробити так, щоб панелі розкривалися і схлопывались по кліку, а допоможе нам в цей раз, невелика магія jQuery. Як у цій справі обійтися виключно засобами CSS3, можна дізнатися з моїх попередніх уроків: так або ж ось так

І так, основну бібліотеку javascript, jQuery підключити ви, сподіваюся, не забули, тепер до документа html підключимо невеликий, виконуваний js, через функції якого, і забезпечимо надійний движуху нашого акордеона:

   <script type="text/javascript">
! 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);

! 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 та поділіться посиланням на запис в своїх соціальних мережах: