Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

jQuery Спойлер с плавным открытием и скрытием содержимого

  • Автор темы impuLse #IT
  • Дата начала
  • Ответы 0
  • Просмотры 2 тыс.
  • Watchers 0

Информация о теме

О теме Здравствуйте, вы читаете тему Спойлер с плавным открытием и скрытием содержимого созданную в в разделе JavaScript пользователем impuLse #IT. Эта тема была просмотрена 2 302 раз(а), получила 0 комментариев и 0 очки реакции...
Название категории JavaScript
Название темы Спойлер с плавным открытием и скрытием содержимого
Автор темы impuLse #IT
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение impuLse #IT

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
899
Реакции
446
Баллы
35
Лучшие ответы
0
  • Автор темы
  • Администратор
  • #1
Скрипт все также поддерживает плавное появление и плавное скрытие содержимого под спойлером. Для реализации плавного появления и скрытия содержимого спойлера Вам потребуется подключить на сайте библиотеку jQuery следующим образом:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Для наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на пару спойлеров, находящихся чуть ниже:

Для получения на своем сайте точно таких же спойлеров, как в примере выше, Вам необходимо будет добавить на свой сайт JavaScript код, который будет отвечать за плавное открытие и скрытие содержимого спойлеров:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Далее, в том месте Вашего сайта, где Вы планируете разместить спойлеры, необходимо использовать такой код:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Как видите, для каждого заголовка спойлера мы добавили дополнительный стиль, отвечающий за цвет заголовка.

Для того чтобы при первоначальной загрузке странички, все спойлеры были закрыты (скрыто их содержимое) и курсор мышки изменялся при наведении на заголовки спойлеров, необходимо в шапку сайта между тегами <head> и </head> добавить стили для спойлеров:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Как Вы могли заметить, для каждого отдельного заголовка спойлера (и его содержимого тоже) можно легко добавить дополнительный стиль, в котором Вы можете придать спойлеры индивидуальное оформление. Мы не стали сильно менять оформление заголовков спойлеров, а просто задали им разные цвета.

При необходимости, как и в предыдущей версии спойлера, можно добавить кнопки "Закрыть все" и "Открыть все" для открытия/закрытия всех спойлеров на страничке. Для этого добавьте себе на сайт вот такой код:
HTML:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Если Вам необходимо, чтобы одновременно мог быть открыт только один спойлер на страничке, а другие при этом сами закрывались, то замените выше приведенный JavaScript код на такой:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Все. Теперь Вы можете делать у себя на сайте сколько угодно спойлеров и добавлять им свои собственные стили.


Также можете онлайн проверит тут:
Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
 
Верх Низ