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

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

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

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

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

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

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

Спойлер: пример
Это примерный текст!

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

  1. Первым делом подключаем используемую библиотеку jQuery и еще JS приблуду, которая отвечает за плавное сворачивание и разворачивание. Приведенный код нужно разместить на web-странице между <head>...</head>
    Сам код:
    <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>
  2. Добавляем в CSS-файл строчку, чтобы по-умолчанию спойлер был закрыт:
    .splCont{display:none; padding:3px 5px;}
    Если у Вас нет CSS-файла или Вы не знаете как его туда вставить, то можно прямо в самом тексте помещаем (главное разместить до спойлера):
    <style type="text/css">
    .splCont{display:none; padding:3px 5px;}
    </style>
  3. Далее размещаем между тегами <body>...</body> в любом месте код самого спойлера. Для моего примера это код такой:
    <a href="javscript://" class="splLink"><strong>Спойлер:</strong> пример</a>
    <div class="splCont">
    Это примерный текст!
    </div>

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

Если Вы хотите удивить свою девушку, то подарите ей дизайнерскую, уникальную сумочку, которую можно найти на Designer Bags Online. Кстати, на том сайте можно найти не только дизайнерские сумочки, а так же много других различных прикольных вещей.

Комментарии:

  1. Александр опубликовал комментарий 13 Ноябрь 2010, 17:55 #

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

    | Ответить
  2. Mut@NT опубликовал комментарий 15 Ноябрь 2010, 09:27 #

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

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

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

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

    Пример: ITShaman

    | Ответить
  3. Александр опубликовал комментарий 15 Ноябрь 2010, 13:16 #

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

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

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

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

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

    | Ответить
  4. Гость опубликовал комментарий 22 Ноябрь 2010, 21:58 #

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

    | Ответить
  5. Евгений опубликовал комментарий 6 Январь 2011, 20:34 #

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

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

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

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

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

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

    | Ответить
    • Mut@NT опубликовал комментарий 13 Январь 2011, 22:15 #

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

      | Ответить
    • sfdsf опубликовал комментарий 8 Февраль 2012, 00:56 #

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

      | Ответить
  6. Павел опубликовал комментарий 8 Февраль 2011, 01:30 #

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

    | Ответить
    • Mut@NT опубликовал комментарий 10 Февраль 2011, 20:17 #

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

      | Ответить
  7. }|{ecT' опубликовал комментарий 10 Февраль 2011, 20:44 #

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

    | Ответить
    • Mut@NT опубликовал комментарий 10 Февраль 2011, 20:53 #

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

      | Ответить
  8. Руслан опубликовал комментарий 15 Март 2011, 01:48 #

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

    | Ответить
  9. Виталий опубликовал комментарий 10 Май 2011, 02:34 #

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

    | Ответить
    • Mut@NT опубликовал комментарий 12 Май 2011, 05:52 #

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

      | Ответить
  10. Андрей опубликовал комментарий 16 Май 2011, 14:57 #

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

    | Ответить
  11. Equiment опубликовал комментарий 3 Июль 2011, 22:07 #

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

    | Ответить
  12. max опубликовал комментарий 14 Август 2011, 16:34 #

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

    | Ответить
    • Admin опубликовал комментарий 16 Август 2011, 09:20 #

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

      | Ответить
  13. Макс опубликовал комментарий 14 Сентябрь 2011, 15:59 #

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

    | Ответить
  14. Евгений опубликовал комментарий 27 Ноябрь 2011, 01:53 #

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

    | Ответить
  15. Максим опубликовал комментарий 29 Март 2012, 17:36 #

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

    | Ответить
  16. Алексей опубликовал комментарий 7 Октябрь 2012, 12:28 #

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

    | Ответить
    • ITShaman опубликовал комментарий 11 Октябрь 2012, 05:54 #

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

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

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

      | Ответить
  17. Александр опубликовал комментарий 10 Ноябрь 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>

    | Ответить
  18. Дмитрий опубликовал комментарий 7 Февраль 2013, 18:39 #

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

    | Ответить
    • ITShaman опубликовал комментарий 8 Февраль 2013, 08:07 #

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

      | Ответить
  19. Александр Шульгинов опубликовал комментарий 14 Апрель 2014, 21:43 #

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

    | Ответить
Имя
e-mail
Сайт
Текст комментария: