Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Скрытый блок (спойлер) с помощью jQuery

Сегодняшний пост будет коротким, небольшое представление простейшей реализации скрытых блоков с содержанием с помощью . Как сделать на чистом CSS, я рассказывал ранее, способ хорош, но работает не во всех браузерах стабильно. jQuery в данном случае обеспечивает гарантированную поддержку всеми браузерами, включая тормоз прогресса IE 8.

Для чего вообще нужны скрытые блоки? Да мало-ли, например, для всякого рода объёмных пояснений и описаний разделов или отдельных терминов(слов), и т.д., спектр применения ограничен только фантазией, да логичностью использования данного решения.
 
Скрытый текст с помощью jQuery
 
Скрытый блок с текстовым содержанием очень просто реализовать с помощью пары-тройки строк кода 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 и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 1

  • Павел: 12 октября, 2016 в 18:26

    Скопировал Ваш код: и скрипт, и css для проверки на своем сайте. Блок он скрыл, но при нажатии на ссылку, чтобы его открыть, ничего не получается. Библиотеки jQuery подключены, сам скрипт пишу в отдельном файле, который так же подключен. Остальные скрипты в этом файле работают

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>