Спойлеры в WordPress

Делаем Спойлеры в Worpress.

Для начала определимся для чего это нужно.

Применений Спойлерам очень много.

Основная задача, мне кажется, сэкономить место. Или скрыть от быстрого взгляда некоторую информацию.

Итак как это работает ? Пример можно посмотреть у меня же на блоге. Переведите взгляд правее и посмотрите на меню — Рубрики/метки/Голосование/Каталоги. Все это занимает бОльшую часть боковой колонки, место которой можно более еффективно использовать.

По заголовку можно раскрыть/скрыть содержимое.

Практика.

Сначала нужно задать соответсвующие стили. Для этого открываем CSS файл с описанием стилей и вносим соответствующий код:

.onner {font-size: 1.4em;font-variant: small-caps;color: #08970c;border-bottom: 1px solid #ccc; width: 260px;font-weight: bold;}
 .spoiler {border:0px solid #ddd; padding:3px;}
 .spoiler .inner {border:0px solid #eee; padding:1px;margin:1px;}

Оформление можете редактировать на свой вкус и цвет.

Далее между тегами <head> и </head> подключаем java-скрипт:

<script type="text/javascript"> 
function showSpoiler(obj) {var inner = obj.parentNode.getElementsByTagName("div")[0]; if (inner.style.display == "none") inner.style.display = ""; else inner.style.display = "none"; } 
</script>

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

<div class="spoiler"> 
<span class="onner" onclick="showSpoiler(this);">Раскрыть/Скрыть</span> 
<div class="inner" style="display:none;">
Тут пишем любой контент
</div></div>

1 thought on “Спойлеры в WordPress”

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Изображения должны быть включены!