Скрытый блок (спойлер) с помощью jQuery
Сегодняшний пост будет коротким, небольшое представление простейшей реализации скрытых блоков с содержанием с помощью jQuery. Как сделать скрытый текст на чистом CSS, я рассказывал ранее, способ хорош, но работает не во всех браузерах стабильно. jQuery в данном случае обеспечивает гарантированную поддержку всеми браузерами, включая тормоз прогресса IE 8.
Для чего вообще нужны скрытые блоки? Да мало-ли, например, для всякого рода объёмных пояснений и описаний разделов или отдельных терминов(слов), и т.д., спектр применения ограничен только фантазией, да логичностью использования данного решения.
Скрытый блок с текстовым содержанием очень просто реализовать с помощью пары-тройки строк кода js, при наличии подключенной библиотеки jQuery. Если jQuery у вас ещё не подключена, сделайте это, можно напрямую с сервиса Google, для этого в раздел между тегами <head>...</head> поместите следующее:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
Теперь остаётся прописать в районе перед закрывающим тегом </body> небольшой js:
<script type="text/javascript"> $('.show').click(function() { $(this).toggleClass('active').next()[$(this).next().is(':hidden') ? "slideDown" : "fadeOut"](400); }); </script> |
В результате мы получим, скрытый до поры до времени, блок с любым содержанием (текст, изображения, различные формы и т.д.), раскрывающийся при клике на определённое вами слово, заголовок или отрывок текста:
Подробности опускаю, html-каркас и стили css, отображены в онлайн-редакторе, всё предельно ясно, так что поковырятся в коде и подстроить при необходимости под себя те или иные параметры, можете, как говорится «не отходя от кассы» ))).
Надеюсь, что кому-нибудь данное решение пригодится в работе.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Скопировал Ваш код: и скрипт, и css для проверки на своем сайте. Блок он скрыл, но при нажатии на ссылку, чтобы его открыть, ничего не получается. Библиотеки jQuery подключены, сам скрипт пишу в отдельном файле, который так же подключен. Остальные скрипты в этом файле работают