» Создаём спойлер для сайта на HTML

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

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


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

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


Это можно сделать двумя способами:
Удалённое подключение. Перед закрытием тега head дописываем
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Локальное подключение. Для этого скачиваем последнюю версиюбиблиотеки по этой ссылке, загружаем её в папку с вашим сайтом и перед head пишем
Скачать файл: jquery-latest.zip [81,57 Kb] (cкачиваний: 11)

<script src=" путь к файлу/jquery-latest.js "type="text/javascript"></script>

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

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



У меня код спойлера выглядит следующим образом:
<!-----Спойлер 1------->
	<div class="spoiler-block">
		<a href="#" class="spoiler-title">Спойлер 1</a>
		<div class="spoiler-content"> 
           Привет! Если вы видите этот текст, значит скорре всего ваш спойлер работает :)</br>
		   Вы можете заменить этот текст на любой другой.
		</div> 
	</div>

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



В самом низу страницы перед тегом body
Нужно дописать следующий скрипт:
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.spoiler-title').click(function(){ 
$(this).parent().children('div.spoiler-content').toggle('fast');
return false;
});
});
</script>

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



Для того чтобы блок с контентом был изначально скрыт и появлялся только после нажатия на спойлер в файл стилей нужно прописать:
.spoiler-content{
display:none;  /**скрываем блок контента спойлера**/
padding:15px 20px; /**добавляем внутренний отступ**/
}

Если вы хотите добавить немного привлекательности своему спойлеру, то в файл стилей нужно прописать следующий код
/**Стили блока с текстом внутри спойлера**/
.spoiler-content{
display:none;  /**скрываем блок контента спойлера**/
padding:15px 20px; /**добавляем внутренний отступ**/
border:1px solid #ccc; /**рамка блока контента спойлера**/
margin-top:5px; /**отступ сверху**/
background:#F0F0F0; /**фон блока контента спойлера**/
}
/**Стили блока оборачивающего каждый блок**/
.spoiler-block{
margin-top:10px; 
}
/**Стили кнопки спойлера**/
.spoiler-title {
border:1px solid #B9B9B9;
background: #ccc;/**обычный фон для браузеров, которые не поддерживают градиент**/
background:linear-gradient(#CACACA, #E8E8E8);/**градиентный фон**/
padding:10px;/**внутренний отступ**/
text-decoration:none;/**убираем подчёркивание у ссылки**/
color:#000; /**цвет текста ссылки**/
display:block; /**делаем ссылку на всю ширину**/
}

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


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

Проверьте правильность прописанных классов в HTML коде и в скрипте
Проверьте правильность подключения вашей библиотеки Jquary. Для этого скопируйте ссылку на файл которую вы используете для подключения и вставьте её в адресную строку браузера.

Если вы увидите содержимое файла, то всё работает, если нет, то в ссылке есть ошибка.
Убедитесь что Jquery библиотека подключена у вас только один раз. Если ваш сайт на движке, то есть большая вероятность что сам движок уже подключил библиотеку.








САМОЕ ЧИТАЕМОЕ / КОММЕНТИРУЕМОЕ
  1. Explzh 7.77
  2. Пять проблем, которые могут проявиться при выращивании томатов
  3. ЕС и США возбудили уголовные дела против Петра Порошенко
  4. Сводки с Фронта ДНР за 24 - 25 Марта 2019 г
  5. Военным России предоставят своего собственного мобильного оператора
  6. Пoрядкa 90 cпopтсменoв Дoнбacca откpыли в Дoнецке мacштaбный фестивaль бopьбы
  7. Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
  8. Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
  9. Премьер-министр России встретился с Медведчуком и Бойко
  10. В ДНP уcилят кoнтpoль зa пpoизвoдствoм и oбopoтом aлкоголя и табaчныx изделий.
В Москве похоронили певицу Юлию Началову
В Москве похоронили певицу Юлию Началову
Церемония прощания прошла в ритуальном зале Троекуровского кладбища. В Москве на Троекуровском кладбище похоронили известную Читать далее
В Москве умерла певица Юлия Началова.
В Москве умерла певица Юлия Началова.
Российская певица Юлия Началова скончалась 16 марта в Москве в возрасте 38 лет, сообщила представительница артистки Анна Исаева. Читать далее
Вера Брежнева отказалась считать себя украинской певицей
Вера Брежнева отказалась считать себя украинской певицей
Певица Вера Брежнева призналась в интервью на Youtube-канале "Эмпатия манучи", что не считает себя украинской певицей. Ведущий Читать далее
Юлия Началова впала в состояние комы. У нее начали отказывать внутренние органы
Юлия Началова впала в состояние комы. У нее начали отказывать внутренние органы
Певица Юлия Началова находится в состоянии искусственной комы. Об этом в среду, 13 марта, сообщила PR-менеджер исполнительницы Читать далее
Все новости Шоу
Любовь похожа на прошедший дождь
Любовь похожа на прошедший дождь
Когда-то Акира Татибана серьёзно занималась лёгкой атлетикой, но была вынуждена оставить спорт из-за травмы. Теперь жизнь Читать далее
Мост в звездное небо [ТВ]
Мост в звездное небо [ТВ]
Братья Хосино приезжают в небольшой городок Ямабико, чтобы младший, 13-летний Аюму, поправил здоровье, а старший, 17-летний Читать далее
Девы Галилея
Девы Галилея
Действие разворачивается в 2061 году. На носу новый ледниковый период. Трое потомков Галилео Галилея - сёстры Ходзуки, Хадзуки и Читать далее
Восхождение Героя щита
Восхождение Героя щита
Иватани Наофуми затворник. Все свои дни он обычно проводил за играми и мангой. Но внезапно, неожиданно для себя, Иватани Читать далее
Все Аниме
«    Март 2019    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031
Галерея новостей
ЕС и США возбудили уголовные дела против Петра Порошенко
ЕС и США возбудили уголовные дела против Петра Порошенко
Военным России предоставят своего собственного мобильного оператора
Военным России предоставят своего собственного мобильного оператора
Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
Премьер-министр России встретился с Медведчуком и Бойко
Премьер-министр России встретился с Медведчуком и Бойко
Пропавший 9-летний мальчик, которого искали сотни людей, спал у друга дома, а пока его искали от переживаний умерла его бабушка.
Пропавший 9-летний мальчик, которого искали сотни людей, спал у друга дома, а пока его искали от переживаний умерла его бабушка.
Парень отправил в нокдаун двоих собутыльников своей девушки
Парень отправил в нокдаун двоих собутыльников своей девушки
Россия готовится к массовой выдаче паспортов жителям Донбасса.
Россия готовится к массовой выдаче паспортов жителям Донбасса.
Митинг Петра Порошенко на Западной Украине обернулся дракой
Митинг Петра Порошенко на Западной Украине обернулся дракой
В Ростовской области 16-летняя школьница родила в туалете и спрятала малыша в пакет и выбросила
В Ростовской области 16-летняя школьница родила в туалете и спрятала малыша в пакет и выбросила
Владимир Зеленский: Сторонники Новороссии – зомби. Нужна информационная война против ЛДНР.
Владимир Зеленский: Сторонники Новороссии – зомби. Нужна информационная война против ЛДНР.
В Сорочинске бывший муж в порыве злости сбил на большой скорости свою экс возлюбленную.
В Сорочинске бывший муж в порыве злости сбил на большой скорости свою экс возлюбленную.
Аптеки Мариуполя развернули торговлю наркотиками
Аптеки Мариуполя развернули торговлю наркотиками
По России пройдет акция за признание ДНР и ЛНР
По России пройдет акция за признание ДНР и ЛНР
На Урале молодая девушка с парнем зарезала свою семью
На Урале молодая девушка с парнем зарезала свою семью