n-wp.ru — блог о WordPress

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

Пример внедрения скрипта jQuery для создания спойлера без применения дополнительных плагинов.

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

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

:

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

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

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

5 комментариев