snovapavel,
Открывашка 250 открытие/закрытие блоков со сменой текста на кнопке. вам повезло юбилейный номер. это шоу будет вечным
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css">
.titleSpoiler {
font-weight: bold;
cursor: pointer;
}
.bodySpoiler {
display: none;
font-style: italic;
}
.collapseSpoiler {
margin: 16px 0 0 0;
color: blue;
cursor: pointer;
}
</style>
<script>
$(function() {
$(".titleSpoiler").each(function(g, a) {
function e(c) {
c.preventDefault();
c = +d.is(":hidden");
d.slideToggle(200);
a.text(b[c])
}
a = $(a);
var b = $.trim(a.text()).split("|");
b.push(b[0]);
var d = a.next(".bodySpoiler"),
f = $(".collapseSpoiler", d);
a.text(b[0]);
a.click(e);
f.click(e)
})
});
</script>
</head>
<body>
<div class="titleSpoiler">Показать изображения | Скрыть все изображения</div>
<div class="bodySpoiler">
Текст под спойлером
<br> имеет класс spoiler_body.
<br> Для придания стиля данному тексту
<br> просто добавьте еще один класс.
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">Показать цитату | Скрыть цитирование автора</div>
<div class="bodySpoiler">
А это уже текст второго спойлера!
<br> Данный спойлер также позволяет скрывать
<br> излишнее на сайте!
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">один текст и до открытия и после</div>
<div class="bodySpoiler">
А это уже текст второго спойлера!
<br> Данный спойлер также позволяет скрывать
<br> излишнее на сайте!
<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
</body>
</html>