Как сделать спойлер js
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Чтобы сделать такой спойлер у себя на сайте, используйте этот код:
Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.
Несколько спойлеров на одной странице
Если на одной страницы нужно установить несколько таких спойлеров, тогда этот код Вы вставляете несколько раз. НО. В этом коде установлена функция, которой дано имя spoiler . В следующем коде который Вы будете ставить на той же странице слово spoiler в коде Вам нужно заменить на любое другое. Если третий раз – опять новое слово. Слово spoiler в коде встречается 6 раз. Будьте внимательны.
Редактирование кнопки спойлера
Сама кнопка это следующая строка. Чтобы отредактировать кнопку – нужно вносить изменения именно в эту строку:
В этом уроке хочу показать несколько способов, как можно сделать спойлеры. Давайте разберем что это такое, для тех, кто не в курсе.
Спойлер – это блок с информацией, который изначально скрыт от пользователей и появляется лишь тогда, когда пользователь нажмет на определенную кнопку. На моем сайте в виде спойлера сделаны ПРАВИЛА добавления комментариев. Если нажать на слово ПРАВИЛА, которое выделено, то ниже откроется блок с правилами.
Как писал Выше, покажу несколько способов, которые по своей сути похожи, но используют разные скрипты и осуществляют разную анимацию. Ниже представлены примеры.
Давайте по порядку разберем каждый из способов, чтобы Вы могли применить один из них у себя на сайте. Но перед тем как это сделать, давайте определимся с библиотекой jquery. Если вы ранее подключали ее, то приступайте к просмотру способов, если нет, то в шапке или подвале подключите.
Теперь поехали по порядку.
Способ №1
По сути самый простой из способов, при нажатии блок моментально появляется. При повторном нажатии моментально исчезает. Все просто. Данный способ использую и я.
Добавляем очень простенький скрипт. Его можно добавить непосредственно в то место где хотите вывести блок, можете подключить в шапке или подвале, а можете поместить его в файл, который потом подключить к сайту, опять же, где угодно.
Скрипт работает с блоком у которого присвоен класс spoiler-body и показывает его когда будет совершено нажатие на кнопку, блок или ссылку, в общем что угодно, у чего присвоен класс spoiler-title. Для показа блока, скрипт использует метод toggle.
Далее нужно вставить в нужное место, там где вы хотите видеть кнопку и блок, следующую html разметку:
Кнопкой, которая будет открывать станет текст внутри тега b, как и говорил, можете использовать любой тег.
Ну и присвоим минимальные стили. Главный параметр - это display:none у блока, который будет скрытым. Это обязательное условие, иначе не будет работать.
Больше ничего не нужно, все должно работать. Есть еще один момент. Можно сделать эту анимацию немного плавнее. Для этого в скобках после метода toggle добавьте значение в миллисекундах.
Например: toggle(500). Теперь открытие блока будет происходить не моментально, а пол секунды 0,5. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.
Способ №2
Для этого метода и для всех остальных, будут использоваться все те же блоки и классы, поэтому я не буду расписывать все заново. Отличаться будет лишь сам скрипт.
Данный способ плавно открывает блок и он появляется сверху вниз. Для появления, скрипт использует метод slideToggle.
Тут как и в первом варианте можно изменить время анимации. По умолчанию его значение равно 400 миллисекунд. Если желаете ускорить или замедлить, то в скобках добавьте значение.
Например: slideToggle(600).
Способ №3
Этот способ по сути как и второй, стой же анимацией, но в нем есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. В примере вы видели, это просто текст - Показать текст который при открытии блока, меняется на Скрыть текст.
Если добавить фантазию, то можно вместо текста добавить картинку или блок, который украсить стилями. Используется в этом способе, следующая функция.
Изменить время анимации можно по тому же методу, что и во втором способе.
В принципе все, это три основных метода, которые я хотел показать. Какой именно Вам подходит, решать Вам. Теперь Вы сможете без проблем организовать у себя блок, который появляется после нажатия на кнопку.
А Вы используете спойлеры у себя на сайте и для чего?
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Hobo 2020-07-31 в WordPress Комментариев: 0
Последнее обновление - 21 января 2021 в 15:57
Чтобы сделать спойлер на сайте, работающем под управлением CMS WordPress, не обязательно устанавливать дополнительный плагин. Достаточно обладать навыком редактирования файлов установленной темы.
Что такое спойлер и зачем он нужен? Это некоторая часть контента на веб-странице, которая скрыта от глаз пользователя. Однако, при желании, посетитель сайта без труда имеет возможность открыть её одним кликом мышки и просмотреть. Иногда требуется скрыть некоторый контент, который не имеет особой смысловой нагрузки, либо очень длинный текст. Назначение может быть различным.
В Сети я нашёл несколько способов реализации такого функционала. В этой записи приведу несколько примеров.
Начну с варианта, предложенного ImpulsWeb . Потребуется вставить в область контента, где хотим видеть спойлер, html-код, включить в работу скрипт и присвоить стили. Кроме того, следует учитывать, что на веб-ресурсе подключена и правильно работает библиотека JQuery.
Автор предлагает такую вёрстку:
Далее, перед закрывающим тегом body вставим код скрипта:
Теперь, чтобы результат работы выглядел привлекательнее, добавим стили в файл style.css:
А вот ещё один способ, предложенный в блоге Свободного Вебмастера . Этот метод реализуется с применением шорткода.
Чтобы скрытый контент раскрывался и снова закрывался при клике, необходима работа jQuery, как и в первом варианте. Включим в работу скрипт. для этого создадим файл spoiler.js с таким содержимым:
Файл spoiler.js разместить в папке с сайтом. Теперь, чтобы подключить скрипт, перед закрывающим тегом head (файл темы header.php) вставим строчку:
Далее, при помощи CSS настроим внешний вид спойлера, добавив в файл style.css действующей темы такие строчки:
Как теперь показать спойлер на странице? В нужном месте необходимо вставить шорткод:
[spoiler] Здесь содержимое, которое необходимо скрыть [/spoiler]
[spoiler title="Название спойлера"] Здесь содержимое, которое необходимо скрыть [/spoiler]
А вот третий способ реализации при помощи только html и css. Указываем такой html-код:
Придаём внешний вид:
Ещё интересный спойлер, раскрывающийся при клике на кнопки. Потребуется включение jQuery.
Или вот такое решение на html, js и css.
И ещё один вариант мне понравился в блоге Константина Белана . По сути он не отличается от предыдущих способов. Всё то же самое, отличие только во внешнем оформлении.
План такой. Открываем на редактирование файл footer.php и перед закрывающим тегом body вставляем код скрипта:
За визуальное оформление будут отвечать следующие строчки кода, которые необходимо внести в файл style.css действующей темы:
Что касается вёрстки, то в область контента, где планируется скрыть некоторый текст или изображения, вставить такой код:
Рассмотрим toggleClass атрибут jquery для создания спойлера или аккордеона.
Вот два блока: первый с классом box и второй с классами box closed:
Для данного урока стили особо не важны, но на всякий случай выкладываю:
Работаем с jQuery, поэтому не забываем её подключить в шапке.
Далее простенький скрипт:
Cтрочка $(".box .block").show(); - первый блок показывается по умолчанию, то есть развернут;
строчка $(".closed .block").hide(); - второй блок по умолчанию свернут, скрыт.
Можно использовать данный скрипт, как для спойлеров, так и например создания аккордеонов.
Читайте также: