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

Сегодня я покажу реализацию спойлера на jquery - очень-очень простую, так что вы сможете все повторить буквально за несколько минут.

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

Ну а там если захотите обойтись без нее, можно будет и переписать на чистый js.

Реализуем спойлер

Все будет просто, как 2 пальца об асфальт. Будем считать, что вы уже подключили jquery, тогда там, где вам нужно вывести спойлер, вставляем такой код:

<div class="spoiler">
    <a class="open-spoiler" href="">Кнопка для открытия спойлера >>></a>
    <div class="spoiler-content"> Контент спойлера (изначально скрыт)</div>
</div>

Естественно, текст кнопки и сам контент редактируем под себя. Вы можете добавить свои дополнительные css классы к любым элементам для доп. стилизации. Теперь я добавлю в style.css такой код:

.open-spoiler{
    display: block;
    background: red;
    padding: 5px;
    color: #fff;
    width: 350px;
    font-size: 18px;
}
 .spoiler-content{
    display:none;
    padding: 5px;
    background: #efefef;
}

Во-первых, он стилизует кнопку. Во-вторых, уберет сам спойлер со страницы. Вот так выглядит кнопка:

кнопка спойлера

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

Итак, все волшебство выполняет этот код:

$(document).ready(function(){
    $('.open-spoiler').click(function(){
        $(this).parent().children('div.spoiler-content').toggle('normal');
        return false;
    });
});

Если же вы хотите вставить код прямо в свой html-файл (а не в js), то, естественно, добавляем теги script в начале и конце.

Очень важно, чтобы скрипт или файл со скриптом подключался к сайту позднее jquery. Если это не сделать, то ничего работать не будет! Библиотека jquery должна загрузиться перед скриптом.

Вот так сделал я:

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

Проверяем результат

Вот что вышло:

готовый jquery спойлер

При нажатии на кнопку происходит плавное появление контента. При повторном клике — плавное исчезновение. Так что вот так, друзья. Это был вариант реализации простого jquery-спойлера.

К слову, я не пользуюсь этим вариантом, но лишь по той причине, что поставил на все wordpress-сайты адаптивную тему Root. Она шикарна и там уже внутри реализованы спойлеры, так зачем мне добавлять еще и свой лишний код?

Понравилась статья? Поделиться с друзьями:
Добавить комментарий