Javascript > Спойлеры для показа и скрытия контента на сайте > Спойлер для показа и скрытия контента на сайте на jQuery

Спойлер для показа и скрытия контента на сайте на jQuery


Рис 1. Спойлер для показа и скрытия контента на jQuery.
Скрипт плавного спойлера для показа и скрытия контента на сайте на jQuery. Имеет неограниченную вложенность спойлеров.

Описание скрипта спойлера для показа и скрытия контента на сайте на jQuery

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

Еще одной полезной функцией спойлера является возможность создания упорядоченной структуры большого объема информации. Создать удобную и понятную навигацию для пользователя. Такая структура создается, благодяря возможности вкладывать одни спойлеры в другие неограниченное количество раз и в неограниченном количестве.

Каждый отдельный спойлер имеет заголовок, описывающий скрытое содержимое спойлера. Открытие и закрытие спойлера выполняется при нажатии на его заголовок. Заголовки подсвечиваются, при наведении на них курсора мыши. Свернутые спойлеры имеют значек "+", раскрытые "-". При большом количестве спойлеров, имеется возможность быстрого раскрытия и закрытия всех спойлеров одновременно, с помощью кнопок и . Это так называемые глобальные кнопки, действующие одновременно на все имеющиеся спойлеры. Для вложенных групп спойлеров имеются свои кнопки и . Такие кнопки действуют на все вложенные спойлеры в пределах своего родителя. Кнопки могут быть убраны или добавлены в спойлеры, что не влияет на их работу.

Настройки скрипта спойлера для показа и скрытия контента на сайте на jQuery

● с помощью CSS стилей можно изменять цвет заголовков спойлеров, цвет фона внутри раскрытых спойлеров, оформление кнопок и многое другое.
● с помощью настроек jQuery регулируется скорость (плавность) скрытия и раскрытия вкладок спойлеров.

Установка скрипта спойлера для показа и скрытия контента на сайте на jQuery

Вставить скрипт (CSS+HTML+Javascript) на страницу сайта внутри тега "body".

Характеристики скрипта спойлера для показа и скрытия контента на сайте на jQuery

● работает в любом современном браузере.
● использует jQuery.
● не требует PHP и MySQL.
● имеет открытый исходный код HTML, CSS и Javascript.
● не является модулем или плагином CMS Joomla или WordPress.

Пример работы скрипта спойлера для показа и скрытия контента на сайте на jQuery

Этот пример показывает работу спойлеров при размещении в них различного типа контента. Созданная структура спойлеров является весьма удобной и информативной. Спойлеры не занимают много места на сайте и содержат в себе много информации.

+ Спойлер №1 - Фото галерея
+ Вложенный спойлер №1 - Картинки
+ Вложенный спойлер №2 - Изображения
+ Вложенный спойлер №3 - Фото
+ Спойлер №2 - Виды спойлеров
+ Спойлеры на Javascript
Спойлеры, написанные на чистом Javascript не требуют подключения и подгрузки дополнительных библиотек, например jQuery. Такие спойлеры будут работать на локальном компьютере, даже без наличия Интернет соединения. Создание сложной анимации на чистом Javascript, может быть достаточно трудоемкой задачей, требующим написания большого количества кода. Такие спойлеры могут выглядеть менее эффектно, в отличии от спойлеров, использующих готовые решения для анимации из библиотеки jQuery.
+ Спойлеры на jQuery
Спойлеры с использованием библиотеки jQuery, по своим возможностям ничем не уступают спойлерам на чистом javascript. Спойлеры на jQuery, как правило, имеют меньшее количество кода при той же функциональности. Позволяют более легко и просто добавлять различные визуальные эффекты. Соответственно, для работы таких спойлеров, необходимо подключить библиотеку jQuery. Это не является их минусом, т.к. в настоящий момент, большинство скриптов используют библиотеку jQuery и как правило, она уже подключена к большинству сайтов.
+ Спойлеры на CSS
Спойлеры, созданные только с использованием CSS стилей, это самые простые виды спойлеров, не требующие знания javascript. Такие спойлеры легко устанавливаются на сайт. Возможно возникновение конфликтов стилей. Спойлеры на CSS мало функциональны, т.к. с помощью одного CSS не все возможно реализовать. При необходимости увеличения функционала спойлеров, все же приходится прибегать к использованию javascript.
+ Спойлер №3 - Предназначение спойлеров
Спойлеры предназначены для освобождения места на странице сайта. Контент сайта, помещенный в спойлер, остается на странице и по прежнему доступен посетителю для просмотра. Применение спойлеров может решать и другие задачи.
+ Спойлер №4 - HTML код спойлера
<div class="spoiler-block"> <div class="spoiler-title"> <span class='spoiler-plus'>+</span> <span class='spoiler-header'>Заголовок спойлера</span> </div> <div class="spoiler-content"> Контент спойлера Контент спойлера Контент спойлера </div> </div>

Скачать скрипт спойлера для показа и скрытия контента на сайте на jQuery

Скачать скрипт спойлера для показа и скрытия контента на сайте на jQuery
на странице автора