Спойлер для WordPress на HTML и jQuery

Сайт OnWordpress.ru продается

Оптимальная цена 300 000 рублей

Подробнее
Спойлер для WordPress

Спойлер - это небольшой HTML блок, который скрывает свое содержимое до определенного действия, например, до нажатия на определенную ссылку. Спойлер для WordPress можно сделать с помощью специальных плагинов, но сейчас я расскажу, как сделать спойлер для WordPress на HTML и jQuery, не используя при этом плагинов.

HTML каркас спойлера для WordPress

Для начала предлагаю создать HTML каркас будущего спойлера. Вы можете взять HTML код ниже, скопировать его и вставить в то место вашего сайта, где должен быть ваш спойлер. Когда мне нужен был спойлер на WordPress сайте, я вставлял этот HTML код в шаблон single.php.

<a href="#" class="spoilerLink">Эта ссылка открывает спойлер</a>

<div class="spoilerContent">
Здесь должен быть текст, который необходимо скрыть спойлером
</div>

А в файл style.css необходимо добавить следующий код, который будет скрывать блок спойлера по умолчанию.

.spoilerContent {display:none;}

Код jQuery для спойлера

Библиотека jQuery автоматически подключается в WordPress, поэтому нет необходимости делать это еще раз. Но, для того чтобы спойлер срабатывал при нажатии на ссылку, необходимо добавить следующий код. Код можно добавить сразу после спойлера или в шаблон footer.php.

<script type="text/javascript">
(function($) {

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

})(jQuery)
</script>

Готовый спойлер для WordPress

Таким образом, на вашем WordPress сайте появится ссылка и скрытый блок. При нажатии на ссылку, скрытый блок становится видимым. Если у вас все работает должным образом, значит вы успешно создали спойлер для WordPress на HTML и jQuery.

Если у вас при нажатии на ссылку не открывается спойлер, значит вы неверно выполнили описанные выше действия или произошел конфликт jQuery, который необходимо исправить.

Расскажите друзьям
Нравится блог? - Читайте ВКонтакте
Ответим на Ваши вопросы в комментариях