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

41

Раскрывающиеся блоки с скрытым содержанием с помощью CSS3

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

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

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

Приклад №1

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

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

  • Прапорець (Checkbox) — тег зі значенням checkbox атрибута type і з певним сполучною ідентифікатором
  • Заголовок (текст перемикач) — тег зі значенням унікального ідентифікатора для атрибута 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;
}

/* приховуємо чекбокси і блоки із змістом */
.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";
}

/* приховуємо чекбокси і блоки із змістом */
.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.5 s;
-moz-animation:fade ease-in 0.5 s;
animation:fade ease-in 0.5 s;
}
/* анімація при появі прихованих блоків */
@-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.

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

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

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