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

Плавный спойлер

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

Выглядит он так:

НАЖМИ

Тут может быть любой HTML
например картинка
Брауни

Установка плавного спойлера на сайт

Для работы спойлера на сайте должен быть установлен Jquery. Обычно, по умолчанию, он уже установлен. Но если его нет, между тегами <head> и </head> нужно добавить:

HTML спойлера

HTML очень простой.

Для работы спойлера этот HTML изменять нельзя, так как в скрипте будет использоваться parentNode и при изменении структуры HTML спойлер просто не будет работать.

JS

А вот собственно и Javascript. Этот скрипт нужно разместить перед спойлером. Если спойлеров на странице несколько, его нужно разместить перед самым первым.

CSS

Чтобы спрятать все спойлеры при начальной загрузке страницы, применяются CSS стили:


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

2 комментария

  1. Не плохо. А как сделать чтобы вместо кнопки был обычный текст?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *