Как сделать спойлер на сайте WordPress без плагина

Привет всем, вот решил написать этот пост по заказу в моём новом разделе, Online Заявка. Я думаю для многих это будет полезным, так как используют данную функцию не много блогеров, и сегодня мы разберем все по полочкам, как создать красивый спойлер для сайта, без плагинов.

Это очень удобный спойлер для сайта, в ней можно скрыть много информации, картинки, видео, любой текст, код и т.д. Мне он очень нравится, я им пользуюсь очень часто, если вы не первый раз у меня на блоге, то наверное уже заметили что данный спойлер у меня много где используется, и для начала я вам покажу как он выглядит для тех кто еще не понял что это такое )

Ну что, давайте приступим к созданию этого чудо спойлера, и для начала нам нужно подключить библиотеку jQuery, я рекомендую подключить библиотеку в фай footer вашего шаблона.

Внимание !!!
Перед тем как добавить данный код скрипта, проверьте сначала, нет ли у вас этой библиотеки, если есть то не нужно еще раз подключать.

Если нет, то тогда идем в редактор находим файл footer.php и добавляем перед закрытым тегом /body следующий скрипт код:

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Затем дальше нам нужно в этот же footer.php прям под этим кодом, вставьте скрипт:

1
2
3
4
5
6
7
8
9
10

<script>// <![CDATA[
$(".closed").toggleClass("show");
 
$(".title").click(function(){
 $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
 if ($(this).parent().hasClass("show"))
     $(this).children(".title_h3").css("background","#bbbbbb");
 else $(this).children(".title_h3").css("background","#dddddd");
});
// ]]></script>

Ну вот с основой все понятно, теперь переходим в файл style.css и добавляем стиль нашего спойлера, то есть придадим ему внешний вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.spoiler {
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid #dfdfdf;
    border-left: 2px solid #3965a8;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.title_h3 {
    cursor:pointer;
    font-size: 14px;
    background: #dddddd;
    margin: 0 -10px 0 -10px;
    padding: 10px;
    padding-left: 30px;
    -moz-box-shadow: 0 0 9px #dddddd inset;
    box-shadow: 0 0 9px #dddddd inset;
}
 
.closed .contents { display:none; }
.closed h3 { /* background: #bbbbbb; */ }
.contents { padding: 10px; }

Этот стиль вы можете поменять под себя, как вам нужно, я не буду сейчас показывать что значит каждая строчка стиля, если вы не понимаете ничего в css, то берите в руки Google и вбивайте строчку и смотрите что это и как с ним работать, я думаю понятно все, теперь перейдем непосредственно к коду который и будет выводить данный спойлер, вот он :

1
2
3
4
5
6

<div class="spoiler closed">
<div class="title">
<div class="title_h3"><strong>Текст вашего стойлера</strong></div>
</div>
<div class="contents">Ну а здесь текст, тот который под спойлером, то есть скрытый</div>
</div>

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

С уважением Евгений Смецкий