Как сделать спойлер в 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, но не сильно критично я думаю. Да и не всегда это проявляется.

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

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

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

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

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

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

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

    Пример: ITShaman

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      | Ответить
  8. Руслан опубликовал 15 Март 2011, 00: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
Текст комментария: # ×


Комментарии
Облако тегов
Интересное