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

2 комментария

  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;
      });

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

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

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