• Инструменты для разработчика

    • Самые удобные инструменты для разработчика, которые облегчат жизнь любого как начинающего так и продвинутого разработчика. Украшатели, уменьшители, конвертеры кодов. Доменные инструменты. Всё в одном комплекте.
  • Использование BB кодов. Тут указаны существующие BB коды на форуме.

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

  • Автор темы impuLse #IT
  • Дата создания
  • Ответов 0
  • Просмотров 2 тыс.

impuLse #IT

Администратор
Команда форума
Регистрация
12.03.2015
Сообщения
915
Репутация
449
Баллы
104
Награды
2
Адрес
mySQL
Лучшие ответы
0
  • Супер постер
  • Постер
Скрипт все также поддерживает плавное появление и плавное скрытие содержимого под спойлером. Для реализации плавного появления и скрытия содержимого спойлера Вам потребуется подключить на сайте библиотеку jQuery следующим образом:
Код:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
Для наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на пару спойлеров, находящихся чуть ниже:

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

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

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


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