Создаём спойлер для сайта на 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

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

  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, стилизую под себя и будет то что надо!
    Спасибо еще раз!!! https://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

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

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

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

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

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

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

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

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