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

Просмотров: 1 464

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

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

Убрать текст под spoiler
Как спрятать текст, картинку под спойлер (spoiler)
Spoiler:
Lorem Ipsum по русски
Lorem Ipsum боль сидеть Амет, consectetur adipisicing элит, SED сделать eiusmod tempor incididunt ут Labore и др. dolore Magna aliqua. Ut эним объявление миним veniam, quis nostrud упражнение тестовая ссылка ullamco Laboris Ниси-ут aliquip бывший шт commodo consequat. Duis Aute irure боль в reprehenderit в voluptate другую ссылку велит эссе cillum dolore ЕС fugiat Nulla pariatur. Excepteur Синт occaecat cupidatat без proident, sunt в Culpa Квай officia deserunt mollit Anim ID EST laborum.
Lorem Ipsum просто манекен текста печати и верстки промышленности. Lorem Ipsum был стандартный текст манекен в отрасли с тех пор 1500-х годов, когда неизвестный принтер принял камбуз типа и вскарабкался его, чтобы сделать ссылку еще раз с более длинными якорный текст книги типа образца. Он не только успешно пережил пять веков, но и перешагнул в электронный набор, оставаясь практически неизменной. Она стала популярной в 1960-х с тестовыми ссылку выпуск Letraset листов, содержащих проходы Lorem Ipsum, а в последнее время с настольными издателя программного обеспечения, как Aldus PageMaker включая версии Lorem Ipsum.

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

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

Код:

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

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

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


Оставьте комментарий