наверх

Простой спойлер на jQuery

Конструкция спойлера используется практически на всех сайтах, чаще всего в блоках вопрос-ответ или просто если нужно разместить большой объем контента на небольшой площади. И конечно же для каждого веб-мастера умение создавать спойлеры жизненно важный скилл. В этой статье будет рассмотрено создание простого спойлера средствами jQuery.

Рассмотрим следующий пример:

———————————————————————————————————————————————————————-

Нажми на меня

Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое. Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.

———————————————————————————————————————————————————————-

Вот так выглядит разметка:

Не забудьте подключить библиотеку jQuery к вашему сайту если она еще не подключена.

Скрипт будет выглядеть так:

Рассмотрим его более детально.

Делаем текст с классом spoiler-body невидимым. Почему не воспользоваться таблицами стилей? Потому, что если на ваш сайт зайдет человек с отключенным JS, он увидит текст. Если же мы воспользуемся CSS, то пользователь с отключенным JS его не увидит.

При клике на элемент с классом spoiler-zagolovok показываем идущий за ним элемент с классом spoiler-body. Ну а значение 500 это за сколько миллисекунд будет отображен элемент.

JavaScript, jQuery