Как спрятать текст, картинку под спойлер (spoiler)

Привет друзья! Бывает иногда необходимость прятать/убрать текст, картинку или скрипт под спойлер (spoiler) в Blogger, что бы наши статьи выглядели более компактно и привлекательней. Сегодня я покажу вам несколько примеров, как скрывать объёмные сообщения при помощи спойлера для blogger. Spoiler - язык программирования HTML, Javascript и так далее. Спойлером называют скрывающийся (или показывающийся) объект (текст, картинка, код и так далее).

Стильный спойлер (spoiler) для Blogger - скрываем текст (сменил шаблон перестал работать в WordPress):

Spoiler:

Теперь попробуем скрыть картинку под спойлер:

Spoiler:

Код:

<div style="margin: 5px 20px 20px;">
<div style="margin-bottom: 2px;">
<b>Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Здесь Ваш текст, скрипт или картинка

<br>
</div>
</div>&nbsp;
</div>

Надписи, размер кнопки, размер шрифта надписи, можете заменить на свои. Код ставится в режиме HTML.

Переходим к следующему спойлеру. С помощью сочетанием клавиш (Ctrl+F) Вам надо найти строку в шаблоне: </body> Перед этой строчкой - добавьте этот код:

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Открыть спойлер";
}
else {
ele.style.display = "block";
text.innerHTML = "Скрыть текст";
}
}
</script>

Сохраните шаблон, теперь в режиме HTML пользуйтесь этим кодом:

<a href="javascript:toggle();" id="displayText">Открыть спойлер</a>
<div id="toggleText" style="display: none;">Здесь должен быть ваш текст или картинка</div>

Вот пока всё. Всем пока. До новых встреч.

С уважением, ваш Сергей