Розкриваються блоки з прихованим змістом за допомогою CSS3

1. приклад №1
2. 1. CSS
3. 2. CSS

У процесі створення сайту або блогу і подальшого його наповнення змістом, з різних причин, деколи виникає необхідність приховати якусь частину тексту, розмістити більше об'ємну інформацію в захований до пори до часу блок, але при цьому все ж вказати користувачеві на те, що є ще дещо, і надати йому можливість переглянути прихований зміст без переходу до наступного рядка або сторінку.
Раніше для реалізації такого рішення використовувалася купа javascript, тепер же все це можна дуже легко виконати за допомогою дивовижних властивостей CSS3 .

Давайте, спробуємо обійтися без зайвої води, подивіться весь цей найпростіший механізм в дії, на наочному прикладі, так само можете і підредагувати що-небудь при бажанні:

приклад №1

У ролі перемикачів розкриваються блоків з додатковою інформацією використовується ніяк не виділення і не позначений текст, з недвозначним пропозицією натиснути на нього, що ви без страху і сумнівів обов'язково зробіть, щоб побачити Прихований текст )))

Як бачите все більш-ніж прекрасно працює, прихований зміст, як з'являється без проблем, так і зникає від легкого натискання мишкою, і при цьому ми задіяли самий мінімум виконуваного коду, і в html-каркасі, і в формуванні стилів css. Без підключення додаткових javascript бібліотек, з одвічною тривогою, а не відключені чи вони на стороні користувача.
Реалізувати все це дійство, стало можливим завдяки CSS3 псевдоклас: checked, застосовуваним до елементів інтерфейсу, таким як перемикачі ( checkbox ). Що ми власне і зробили, в тезі <input type = "text" /> атрибуту type ми присвоїли значення checkbox, а так же ідентифікатор id = "hd-1" відповідний унікальним ідентифікатором for = "hd-1" перемикача поточного блоку. Чекбокси сховаємо грунтовно і назавжди, прописавши в класі .hide властивість display: none;
Власне тут, пояснювати щось особливо і нема чого, весь механізм включення і виключення прихованих блоків складається з трьох елементів:

• Прапорець (Checkbox) - тег <input type = "text" /> із значенням checkbox атрибута type і з певним сполучною ідентифікатором
• Тема (текст перемикач) - тег <label> </ label> із значенням унікального ідентифікатора для атрибута for, (ідентифікатор обов'язково повинен бути таким же, як ідентифікатор тега input зі значенням checkbox атрибута type).
• Блок з вмістом - тег div, в якому і буде міститися до кращих часів, поки користувач не клацне, різний прихований контент (текст, зображення і т.д. і т.п.)

Сподіваюся, з мого сумбурного пояснення, все ж стало зрозуміло в чому вся фішка. CSS застосовує нові стилі (за допомогою псевдокласу checked), щоб показати блок контенту, який до цього був прихований, тільки тоді, коли користувач натискає на елемент, який пов'язаний з прапорцем (checkbox) за унікальним ідентифікатором.

З усього цього випливає важливе зауваження:

коли ви використовуєте кілька прихованих блоків на одній сторінці, кожен перемикач повинен мати унікальний ідентифікатор, який буде відрізнятися від ідентифікаторів в інших блоках.

Так, на словах ми розібрали, що куди і навіщо, тепер, давайте подивимося на html-каркас всієї коннструкціі:

<Input class = "hide" id = "hd-1" type = "checkbox"> <label for = "hd-1"> Натисніть тут, щоб відкрити! </ Label> <div> Приховане зміст ..... . </ div> <input class = "hide" id = "hd-2" type = "checkbox"> <label for = "hd-2"> Натисніть тут, щоб прочитати більше! </ label> <div> Приховане зміст ... </ div>

Далі переходимо безпосередньо до формування стилів CSS, без яких вся ця конструкція працювати не буде. Самий мінімум коду, без якого-небудь оформлення, тільки трішки виділив фон для розкривається блоку, щоб визначити для вас і показати рамки даного тексту. Ви ж можете оформляти блоки як вам заманеться, навісити бордюри, скруглить кути, виділити текст, або ж залити фон градієнтом .

1. CSS

/ * Приховуємо чекбокси і блоки з вмістом * / .hide, .hide + label ~ div {display: none; } / * Вид тексту label * / .hide + label, .hide: checked + label {padding: 0; color: green; cursor: pointer; border-bottom: 1px dotted green; } / * Вид тексту label при активному перемикачі * / .hide: checked + label {color: red; border-bottom: 0; } / * Коли чекбокс активний показуємо блоки з вмістом * / .hide: checked + label + div {display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px # 7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow: inset 3px 3px 10px # 7d8e8f; padding: 10px; }

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

2. CSS

/ * Приховуємо чекбокси і блоки з вмістом * / .hide, .hide + label ~ div {display: none; } / * Вид тексту label * / .hide + label {margin: 0; padding: 0; color: green; cursor: pointer; display: inline-block; } / * Вид тексту label при активному перемикачі * / .hide: checked + label {color: red; border-bottom: 0; } / * Коли чекбокс активний показуємо блоки з вмістом * / .hide: checked + label + div {display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px # 7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow: inset 3px 3px 10px # 7d8e8f; margin-left: 20px; padding: 10px; / * Трішки анімації при появі * / -webkit-animation: fade ease-in 0.5s; -moz-animation: fade ease-in 0.5s; animation: fade ease-in 0.5s; } / * Анімація при появі прихованих блоків * / @ -moz-keyframes fade {from {opacity: 0; } To {opacity: 1}} @ -webkit-keyframes fade {from {opacity: 0; } To {opacity: 1}} @keyframes fade {from {opacity: 0; } To {opacity: 1}} .hide + label: before {background-color: # 1e90ff; color: #fff; content: "\ 002B"; display: block; float: left; font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin: 3px 5px; text-align: center; width: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .Hide: checked + label: before {content: "\ 2212"; }

За всіма розкладами, спосіб безсумнівно хороший, але як завжди, навіть не дивно анітрохи, проблеми виникають з вічним гальмом прогресу, браузером IE, псевдо-клас checked підтримують тільки 9-я і більш сучасні версії цього браузера. Для старих версій IE-шки, залишається все по-старому, вам доведеться використовувати javascript.

Використовуючи приховані чекбокси, ви можете легко реалізувати вкладки-таби , модальне вікно , Блоки в стилі акордеон , Слайдери, галереї та багато іншого.

З повагою Андрій

Буду вдячний, якщо поділитеся посиланням на запис в своїх соц-мережах: