Простой спойлер для сайта

Доброго времени суток, уважаемые читатели. Сегодня будем устанавливать простой спойлер на сайт. Для тех, кто не знает, что такое спойлер, то это не то, что ставят на автомобили для улучшения аэродинамических характеристик. 🙂 Это возможность скрыть часть контента и открыть его по клику мышкой. Спойлеры очень активно используются на форумах, но иногда появляется необходимость установить нечто подобное на сайт или блог. К счастью есть такая возможность. Для этого будем использовать небольшой Javascript код, который нужно вставить между тегами head.

1
2
3
4
5
6
7
8
9
10
11
12
13

<script language="JavaScript" type="text/javascript">
function open_close(id_spol) {
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;
 
if (obj.display == "") obj.display = "none";
else if (obj.display != "none") obj.display = "none";
else obj.display = "block";
}
</script>

B теле страницы разместим кнопку, которая будет открывать наш спойлер с его содержимым.

1
2
3
4

<button onClick="open_close('spoiler')">Скрытый текст</button>
<div id="spoiler" style="display:none;">
<p>Здесь скрытый под спойлером текст</p>
</div>

Кстати о содержимом, это может быть не только текст или какой-то код, но и все, что угодно, например картинки или даже видео. Но, однако не стоит вставлять все подряд в спойлер, а пользоваться им лишь по необходимости. Для моего блога пока такой необходимости нет, поэтому я сделал отдельную демонстрационную страницу.

Демо

Естественно все это дело можно стилизовать более красиво с помощью CSS, например сделать графическую кнопку и оформить скрытый блок, но это уже по желанию. Я решил оставить все в первозданном виде. Если что-то непонятно, спрашивайте об этом на форуме.