Главная » jQuery » Скрытый блок (спойлер) с помощью jQuery

Скрытый блок (спойлер) с помощью 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Один комментарий
  1. Павел:

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru