Спойлер HTML5

<!DOCTYPE html>

<html>

<head>

<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>

<label for="spoiler1">Внимание, спойлер!</label>

<div>Убийца — дворецкий!</div>

</div>

</body>

</html>

Рассказать: