Создаём спойлер для сайта на HTML за 5 шагов

Создаём спойлер для сайта на HTML за 5 шагов

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

Что понадобится для создания спойлера на HTML?

  1. Подключить библиотеку Jquery
  2. Сверстать блок с разворачивающимся текстом (спойлер)
  3. Прописать небольшой скрипт
  4. Дописать стили.
  5. Проверить работу.

Шаг 1. Подключаем библиотеку Jquery

Это можно сделать двумя способами:

  1. Удалённое подключение. Перед закрытием тега head дописываем
  2. Локальное подключение. Для этого скачиваем последнюю версиюбиблиотеки по этой ссылке, загружаем её в папку с вашим сайтом и перед head пишем

    Не забудьте вместо «путь к файлу» указать свой путь.

Шаг 2. Верстаем спойлер на HTML

У меня код спойлера выглядит следующим образом:

Шаг 3. Прописываем скрипт для спойлера

В самом низу страницы перед тегом body
Нужно дописать следующий скрипт:

Шаг 4. Дописываем стили для разворачивающегося текста.

Для того чтобы блок с контентом был изначально скрыт и появлялся только после нажатия на спойлер в файл стилей нужно прописать:

Если вы хотите добавить немного привлекательности своему спойлеру, то в файл стилей нужно прописать следующий код:

Шаг 5. Проверяем работу спойлера на сайте.

Если по каким либо причинам ваш спойлер не заработал попробуйте сделать следующее:

  1. Проверьте правильность прописанных классов в HTML коде и в скрипте
  2. Проверьте правильность подключения вашей библиотеки Jquary. Для этого скопируйте ссылку на файл которую вы используете для подключения и вставьте её в адресную строку браузера.
    Создаём спойлер для сайта HTML
    Если вы увидите содержимое файла, то всё работает, если нет, то в ссылке есть ошибка.
  3. Убедитесь что Jquery библиотека подключена у вас только один раз. Если ваш сайт на движке, то есть большая вероятность что сам движок уже подключил библиотеку.

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

13 комментариев

  1. Приветствую. Спойлер оригинальный, понравился. Все работает отлично, но вот что надумал реализовать (пока безуспешно, не специалист :)) А можно каким-то образом в блоке открывшегося контента поставить кнопку, которая служила бы то есть для закрытия? :) Понятно, что посетитель может нажать ту же кнопку, что и для открытия, но тем не менее, бывает такое, что не каждый догадается.

    • Здравствуйте!
      Можно попробовать добавить в блоки спойлера блок с классом «close-button», оформить его в виде кнопки, а затем дописать для него скрипт:
      $(‘.close-button’).click(function(){
      $(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
      return false;
      });

      Его нужно вставить в тот скрипт, который я давала в статье после строк:
      $(this).parent().children(‘div.spoiler-content’).toggle(‘fast’);
      return false;
      });

  2. Юлия, очень красивый спойлер. У меня сайт на вордпресс на теме layerswp, там нет возможности редактировать код страницы, по крайней мере я не увидел такого. Есть способ писать код в виджете «текст», так и вышел из ситуации. Спасибо за спойлер, думаю он мне пригодится на странице FAQ, стилизую под себя и будет то что надо!
    Спасибо еще раз!!! //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

  3. Еще не по теме, можно ответить на мейл а не сюда, т.к. оффтоп.

    у меня для вопросов и отзывов стоит тот же плагин что и у вас, у вас платная версия? просто отличается от моего, может это все в настройках есть, а я не нашел, т.к. сильно еще не вникал в него, но тем не менее сходу не увидел такой возможности. Например у меня если написать отзыв который идет на модерацию, то при обновлении странички он исчезает из виду, пока его не одобрят, у вас он доступен с надписью что он на модерации, тоже бы так хотелось. да и вообще стиль оригинальный, я тоже постарался убрать все ненужное (кнопку меню, по которой доступно 3 пункта, 2 из которых реклама и еще убрал из футора добавку, которую плагин внедряет, если навести курсор на копирайт, там появляется 2 значка) В общем, интересно знать, если у вас платная версия, тогда я пойму, почему они такие разные, если бесплатная — буду искать настройки…

    • Здравствуйте, Андрей! Вы имеете ввиду систему hypercomments? Если да, то у меня бесплатная версия.

  4. Извините за спамм,но я наконец понял, у вас 3 типа отзывов, я не обратил внимание.
    1 — через ВК
    2 — плагин hypercomments, именно его я имел введу, когда спрашивал
    3 — а вот этот вид отзывов заинтересовал. Можете сообщить, как такой себе на сайт установить? Что это за плагин?

    • Здравствуйте, Андрей! У меня установлена система комментариев hypercomments. Как нибудь сделаю статью по этой теме

  5. Здравствуйте.

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

    • Попробуйте прописать для этого стиля привило !important:

      .spoiler-content{
      display:none!important;

  6. Возможно ли разделить на два объекта спойлер???

    <!——Спойлер 1——->

    <div class=»spoiler-block»>

    <a href=»javscript://» class=»spoiler-title»>Спойлер 1</a>

    <div class=»spoiler-content»>

    Привет! Если вы видите этот текст, значит скорре всего ваш спойлер работает :)</br>

    Вы можете заменить этот текст на любой другой.

    </div>

    </div>

    т.е. первый объект это ссылка, а второй это сам скрытый блок. Но чтобы скрытый блок можно было отнести от ссылки на сколь угодно дальнее расстояние, например в другую ячейку таблицы.. т.е. в первой ячейке таблицы ссылка, в следующей любой контент, в третьей — скрытый блок.

    И чтобы ссылка открывала именно тот блок, для которого написана, например чтобы они «чуяли» друг друга по какому-то определеному ID=»X»

    где Х переменная, для разных соответсвующих блоков и ссылок разная

    • Для этого нужно полностью переделывать верстку спойлера и переписывать скрипт.

  7. а то уж очень понравилась плавность разъезжания скрытого дива, хочу применять для разъезжающихся спойлеров по тексту и так же для организации меню. Но нужно чтобы не по принципу дочернесте, а по принципу самостоятельных двух объектов узнаЮщих друг друга… Заранее спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif