Как сделать спойлер в html с помощью JS?

Как сделать спойлер в html с помощью JS?

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

Если честно, то я перепробовал очень много html-реализаций различных спойлеров, но не один полностью не устроил. Я не являюсь каким-то привередой, но если нельзя разместить несколько спойлеров на одной web-странице, то это является плохим кодом.

Для себя я нашел настоящий Грааль, который отлично вписывается в любой дизайн и не нагружает браузер.

Как выглядит спойлер в html?

В самом начале моего очередного монолога хотелось бы привести пример, того что получится в итоге. Получится вот так:

See the Pen Табы jquery by Ванька (@itshaman) on CodePen.

Мой способ спойлера на HTML+JS

Первым делом подключаем используемую библиотеку jQuery и еще JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между <head>…</head>

Сам код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
        return false;
    });
  });
</script>

Добавляем в CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт:

.splCont {
  display: none;
  padding: 3px 5px;
}

Если у Вас нет CSS-файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера):

<style type="text/css">
  .splCont {
    display: none;
    padding: 3px 5px;
  }
</style>

Далее размещаем между тегами <body>…</body> в любом месте код самого спойлера. Для моего примера это код такой:

<a href="javscript://" class="splLink">Спойлер: пример</a>
<div class="splCont">
  <div>Это примерный текст!</div>
</div>

Заметил только небольшое дерганье при использовании Google Chrome, но не сильно критично я думаю. Да и не всегда это проявляется.

Теги: и

Комментарии

Александр, 13.11.2010 16:55 #

В G Chrome действительно дергается. В mozille спойлер при открытии страницы открыт.
И если на странице несколько таких спойлеров, то при открытии одного открываются все…

Mut@NT, 15.11.2010 08:27 #

Александр: G Chrome действительно дергается. В mozille спойлер при открытии страницы открыт.
И если на странице несколько таких спойлеров, то при открытии одного открываются все…

В Google Chrome ситуация не понятная, так как у меня есть сайты, на которых все отображается супер.

В Firefox все отображается нормально. У Вас скорее всего не добавлен в CSS-файл, параметр display:none

Если на странице много спойлеров, то необходимо поместить каждый спойлер в конструкцию LI…/LI. B Все отлично.

Пример: ITShaman

Александр, 15.11.2010 12:16 #

Mut@NT: Если на странице много спойлеров, то необходимо поместить каждый спойлер в конструкцию LI…/LI. B Все отлично.

За это спасибо)))

Mut@NT: В Firefox все отображается нормально. У Вас скорее всего не добавлен в CSS-файл, параметр display:none

был добавлен, в Chrome нормально ж все было

А насчет дергания, в примере на этом сайте дергается, а на ITShaman – все отлично

Гость, 22.11.2010 20:58 #

Дергается в сафари. Раздражающе. А задумка хорошая.

Евгений, 06.01.2011 19:34 #

Добрый день.
Спасибо вам за скрипт, попробовал его использовать у себя на сайте.
Всё работает, но есть одно “НО”.

На странице висит скрипт LightBox и ваш скрипт и возникает проблема.

1) Спойлер работает, а Фото-Скрипт нет
2) или наоборот, LightBox работает, а ваш скрипт даёт ошибку “указанный адрес javascript:// не существует.”

Заметил, что тут дело в том, какой из скриптов находится выше или ниже по отношению друг к другу в коде страницы.

Ваш скрипт очень бы пригодился, но не знаю, как решить проблему.
Надеюсь на вашу помощь.

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

Mut@NT, 13.01.2011 21:15 #

Я не знаю что Вам посоветовать, так как этот скрипт я просто честно нашел на просторах Интернета

Павел, 08.02.2011 00:30 #

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

Mut@NT, 10.02.2011 19:17 #

Этого я не знаю

}|{ecT', 10.02.2011 19:44 #

а если у меня ucoz и теги li вставить в отдельный спойлер нелья. тогда что???

Mut@NT, 10.02.2011 19:53 #

Тогда нужно найти либо другой способ, либо уйти уже на нормальный хостинг

Руслан, 15.03.2011 00:48 #

Я на юкозе поставил и всё нормально работает!!!

Виталий, 10.05.2011 02:34 #

Спасибо!
А как сделать что бы открытый спойлер сам закрывался если открываешь следующий? Нужно для флеш плеера.
Лучше сделать так чтобы не открывалась страница javscript:// когда javscript выключен.
<a href=”“ javascript:return false;” class=“splLink”><strong>Слушать</strong></a>

Mut@NT, 12.05.2011 05:52 #

Тут я не помощник

Андрей, 16.05.2011 14:57 #

Спасибо большое)))

Equiment, 03.07.2011 22:07 #

Спасибо огромное!

max, 14.08.2011 16:34 #

Вот хороший спойлер как на “rutracker.org”
Работает везде
Неограниченная вложенность

Зюзгин Иван, 16.08.2011 09:20 #

Вы бы лучше ссылку на описание его работы привели, а не на файлхостинг, поэтому сочтено за ненужное – ссылка удалена

Макс, 14.09.2011 15:59 #

Спасибо!
Очень выручили…

Евгений, 27.11.2011 01:53 #

Для тех у кого съежает спойлер при открытии сдвигая ближайшие блоки, то надо просто добавить
.splCont{ position:absolute; }

sfdsf, 08.02.2012 00:56 #

Помести их в разные блоки
Например:
<table>
<tr><td> Тут 1</td></tr>
<tr><td> Тут 2</td></tr>
</table>
Ну что то в таком роде – должно помочь !

Максим, 29.03.2012 17:36 #

Класс! Спасибо!

Алексей, 07.10.2012 12:28 #

А как можно поменять цвет ссылки у меня синий и красный при нажатии ?

Зюзгин Иван, 11.10.2012 05:54 #

Добавьте к CSS коду:
a.splLink, a.splLink:visited { color: black;}
a.splLink:hover { color: gray;}

Цвет ссылки изменится на черный. При наведении серый.

P.S. А вообще, это же основы CSS. Нужно знать.

Александр, 10.11.2012 06:43 #

Люди о чтом вы вообще говорите!!!
Сполер дрочица постоянно! а что бы он не закрывался(открывался сам) надо его чуточку переделать!

<table><tr>
<td onclick=“return changeVisibility(‘mycolor’, this)”></td></tr></table>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=“text/javascript”> </script>
<script type=“text/javascript”>
$(document).ready(function(){
$(’.splLink’).click(function(){
$(this).parent().children(‘div.splCont’).toggle(‘normal’);
return false;
});
});
</script>
<li>
<a href=“javscript://” class=“splLink”><strong>Спойлер:</strong> пример</a>
<div class=“splCont”>
Это примерный текст!
</li>
<li>
<a href=“javscript://” class=“splLink”><strong>Спойлер:</strong> пример</a>
<div class=“splCont”>
Это примерный текст!
</li>
<li>
<a href=“javscript://” class=“splLink”><strong>Спойлер:</strong> пример</a>
<div class=“splCont”>
Это примерный текст!
</li>
</div>

Дмитрий, 07.02.2013 18:39 #

Проблема с отображением спойлера на wordpress. Вставляю Ваш код в запись, а в итоге получаю только название спойлера, которое я указал, на которое наводится “рука”. Тыкаешь на сам спойлер, а он не открывается. В чем может быть причина? уже все перепробывал. Кстати не первый код со спойлером, который тоже не открывается, до этого пытался вставить этот (http://gering111.com/vupadaushiy-spisok-js/), но он тоже не открывается.

Зюзгин Иван, 08.02.2013 08:07 #

Возможно у Вас не подключена jQuery

Александр Шульгинов, 14.04.2014 21:43 #

спасибо за спойлер)






Интересное
Важное событие IT
Создание Cisco
Создание Cisco
Узнать подробнее
Оглавление
  1. Как выглядит спойлер в html?
  2. Мой способ спойлера на HTML+JS