Раскрывающийся по клику блок на jQuery

Раскрывающийся по клику блок на jQuery

В веб-разработке очень часто применяется прием раскрывающихся блоков. Самым простым примером может служить раскрытие спойлеров. Содержимое раскрывающихся блоков может быть абсолютно любым. Если применять jQuery, можно получить максимальную эффективность при минимальных затратах времени. К тому же, можно добавить эффекты к закрытию и открытию блока.

Демо

Как сделать раскрывающийся блок

В первую очередь необходимо проверить, подключена ли jQuery. Если нет, то подключить библиотеку можно различными способами – как через ссылку на внешнее хранилище, так и как простой исполняемый файл.

Реализуется это так:

Если загружать файл jquery-1.10.2.js со своего сайта:

В теге <head> необходимо создать следующую функцию:

Параметром данной функции служит имя блока. Имя блока передается во время вызова самой функции. После этого идет логический блок – если у выбранного блока задано с помощью CSS свойство display = none, то он не отображется, если он уже отображен, то он скрывается. С помощью параметров (в данном случае 400 и 200 соответственно) можно задать скорость прорисовки либо сокрытия элемента.

Осталось создать блок с необходимым содержимым и кнопку, на которую будет повешен вызов функции сокрытия/показа блока.

Используя jQuery можно в несколько строк кода реализовать эффектное отображение/сокрытие выбранного блока.


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