Делаем Спойлеры в 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> |
Спасибо! Полезная инфа. Хочу сделать форму комментария и сами комментарии под спойлером.