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

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

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

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


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

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

<div><a href="//" class="splLink">Спойлер</a>
  <div>содержимое спойлера</div>
</div>
  • Спойлер — это текст ссылки, кликнув по которой, вы откроете содержимое спойлера. Следующий клик спрячет его обратно.
  • Cодержимое спойлера — тут может располагаться все, что угодно: ссылки, картинки. DIV, в который заключено содержимое спойлера, можно украсить с помощью CSS, прописав ему класс.

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

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

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

  1. Света

    А в самом файле jquery-1.3.2.js что писать нужно. Как подключить библиотеку jquery к сайту?

    Ответить
    1. tiaurus

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

      Ответить
    2. Как подключить jQuery: https://n-wp.ru/kak-podklyuchit-jquery/

      Ответить
  2. talne.wordpress.com/

    Ради спойлера подключать jQuery, бред. Но но так как ЦМСка уже так или иначе ее использует то вариант.

    Ответить
  3. smedvedev

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

    Ответить