Здравствуйте, сегодня поговорим о том как сделать спойлер (spoiler) без плагинов, без javascript, без jquery, а только с применением CSS.

Скачать исходники для статьи можно ниже

1-ый вариант:

Добавляем в файл стилей (для сайтов на wordpress: входим в админку, в левом меню выбираем пункт “Внешний вид”, его подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css) следующий код:

.spoiler {
margin-bottom: 1em;
}
.spoiler:before {
content: "Текст ссылки";
text-decoration: underline;
}
.spoiler p {
display: none;
}
.spoiler:hover {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: -4px;
padding-top: 3px;
padding-bottom: 1em;
}
.spoiler:hover p {
display: block;
margin: 1em 0 0;
}

Здесь строчка:
content: “Текст ссылки”;
отвечает за текст спойлера.

Далее на сайте нужно применить следующий код:

Пример спойлера на CSS:
<div class="spoiler">
<p>
Текст, который скрыт от посетителя.
Чтобы увидеть нажмите на ссылку спойлера.
</p>
</div>
На этом все!

Для сайтов на wordpress вышеуказанный код можно вставить либо в виджет “Текст”, либо в “Тестовом редакторе” (Текст) при создании записей или страничек:

В итоге это будет выглядеть так: