Спойлер називається розкриття інтриги, що впливає на сприйняття сюжету книги або фільму. У детективах, наприклад, спойлер є ім'я вбивці. Щоб не псувати задоволення від майбутнього читання або перегляду фільму текст спойлера ховають, залишаючи можливість його переглянути тим, хто хоче дізнатися подробиці сюжету. a href="/html/details"><details>, всередині якого міститься заголовок <summary>. У вихідному вигляді відображається лише заголовок, по клацанню на який розкривається та закривається вміст <details> (рис. 1).
Мал. 1. Вигляд вмісту <details>
У прикладі 1 показано використання елемента <details> для створення спойлерів.
Приклад 1. Спойлер, зроблений через <details>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Спойлер</title> </head> <body> <details> <summary>Увага, спойлер!</summary> <p>Вбивця — дворецький!</p> </details> </body> </html>
У браузерах IE та Edge елементи <summary> та <details>< не працюють, текст спойлера в них відображається відразу. Тому для універсальності розглянемо альтернативну реалізацію через псевдоклас :checked.
Замість <details> будемо використовувати елемент <div> з класом spoiler, заголовок зробимо через <label>, а вміст спойлера знову ж таки через <div> (приклад 2). Для реалізації функції відкриття-закриття додамо <input type="checkbox"> та зв'яжемо його з <label> через атрибути id та for.
Приклад 2. Структура спойлера
><code data-language="html"><div class="spoiler"> <input type="checkbox" id="spoiler1"> <label for="spoiler1">Увага, спойлер!</label> <div>Вбивця — дворецький!</div> </div>
Спершу ховаємо <input> та текст спойлера через властивість display зі значенням none.
.spoiler input, .spoiler div { display: none; }А потім показуємо його через псевдоклас :checked за допомогою тієї ж властивості display.
.spoiler :checked ~ div { display: block; }Цього вже достатньо, щоб при натисканні <label> нижче розташований <div> відображався та ховався. Решта це косметичні деталі для оформлення. Додамо перед заголовком стрілку, як це реалізовано в <summary>, через псевдоелемент ::before та властивість content, значенням якого буде символ стрілки, спрямованої вправо або вниз.
/* Закритий спойлер */
. spoiler label::before { content: '►'; margin-right: 5px; }
/* Відкритий спойлер */
.spoiler :checked + label::before { content: '▼'; }Остаточний код продемонстрований у прикладі 3.
Приклад 3. Спойлер, зроблений через :checked
< ;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Спойлер</title> <style> .spoiler input, .spoiler div { display: none; /* Приховуємо вміст */
}
.spoiler label::before { content: '►'; /* Текст перед заголовком */
margin-right: 5px; /* Відстань до тексту */
}
/* Відкритий спойлер */
.spoiler :checked + label::before { content: '▼'; }
.spoiler :checked ~ div { display: block; /* Показуємо спойлер */
padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body> <div class="spoiler"> <input type="checkbox" id="spoiler1"> <label for="spoiler1">Увага, спойлер!</label> <div>Вбивця — дворецький!</div>
</div>
</body>
</html>Результат цього прикладу в браузері Internet Explorer показаний на мал. 2.
Мал. 2. Вигляд спойлера
Тепер наш спойлер працює у всіх основних браузерах. До недоліків методу слід віднести громіздкий код HTML — при додаванні кількох спойлерів кожному <input> всередині spoiler треба давати унікальний id і це ж значення потім писати в атрибуті for для <label>.