Как сделать простой спойлер

Иногда требуется не показывать полностью какой-то фрагмент текста, поместив его в спойлер – область, которая сворачивается/разворачивается по клику на ключевом слове. Для чего это нужно? Ну, например, чтобы опубликовать текст, который не должен сразу бросаться в глаза, а должен лишь появляться по желанию читателя.
Для того, чтобы в блоге заработал спойлер, можно воспользоваться специальным плагином. А можно и обойтись без плагинов, самостоятельно создав спойлер с помощью java-скриптов. Давайте создадим такой спойлер без посторонней помощи.

Воспользуемся для этого библиотекой jQuery, подключив ее к блогу. Откройте файл header.php и вставьте эти строчки кода до [code inline=”yes”]:


$(document).ready(function(){$('.splLink').click(function(){$(this).parent().children('div.splCont').toggle('normal');return false;});});

Первой строчкой мы подключаем библиотеку jQuery, а остальные строчки как раз нужны для того, чтобы спойлер работал. Теперь нам осталось вставить сам код спойлера в любое место темы:

Спойлер
содержимое спойлера
  • Спойлер – это текст ссылки, кликнув по которой, вы откроете содержимое спойлера. Следующий клик спрячет его обратно.
  • Cодержимое спойлера – тут может располагаться все, что угодно: ссылки, картинки. DIV, в который заключено содержимое спойлера, можно украсить с помощью CSS, прописав ему класс.

Пользуйтесь!

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

5 Комментарии

    • Ничего в самом jQuery писать не нужно. Просто сделайте, как написано в посте. Обратите внимание, что вам нужно скачать библиотеку jQuery (http://jquery.com/), записать ее на сайт, и указать к ней путь (первая строчка первого кода). После этого делайте все по инструкции – и будет вам счастье :) .

  1. Данный метод не работает почему то на ВП 3.2.1.
    Библиотека у меня подключается от Гугла, но и пробовал со своей, не выходит.

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

Ваш электронный адрес не будет опубликован.


*