Спойлер – это блок с информацией (текст, картинки, виде и т.д.), который скрыт от посетителя сайта, но сразу появляется, когда пользователь нажмет на определенную кнопку или ссылку. Спойлер можно использовать для списка вакансий, для городов доставки, для любой информации которую нужно аккуратно структурировать.
Пример:
Ты рождена воспламенять
Воображение поэтов,
Его тревожить и пленять
Любезной живостью приветов,
Восточной странностью речей,
Блистаньем зеркальных очей
И этой ножкою нескромной…
Ты рождена воспламенять
Воображение поэтов,
Его тревожить и пленять
Любезной живостью приветов,
Восточной странностью речей,
Блистаньем зеркальных очей
И этой ножкою нескромной…
Как делаем:
1. Подключаем библиотеку jQuery
Вставляем между тегами <head> и </head> код:
2. Вставляем между тегами <head> и </head> код JavaScript, отвечающий за плавное открытие и скрытие спойлеров.
3. Для того, чтобы все спойлеры изначально были закрыты и курсор мышки изменялся при наведении, необходимо добавить между тегами <head> и </head> следующий код:
4. В месте, где планируете использовать спойлер, необходимо добавить следующий код:
Важно! Каждый спойлер должен быть заключен между тегами <div></div>. Это необходимо для того чтобы каждый спойлер открывался и закрывался отдельно, а не все сразу.
6. Можно добавить кнопки «Закрыть все» и «Открыть все» спойлеры. Для этого добавьте вот такой код:
Статьи используемые при написании:
http://usefulscript.ru/
Спасибо, что научили меня!
Так же хорошая статья, но у меня почему-то не работает, но там есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. http://gnatkovsky.com.ua
P.S. Как выяснилось позже удобнее для чтения куски кода вставлять не окошками, как в этой статье а с помощью онлайн конвертера Html Character EnCoder. Но у обоих есть важный нюанс, если перейти в окно визуального редактора WordPress весь вставленный код с тегом <textarea> и с помощью конвертера собьется и получаться каракули. Проверено на себе.
Поэтому сделаю ка я резерв статьи в txt файле.