Как сделать спойлер или появление блока при нажатии
В этом уроке хочу показать несколько способов, как можно сделать спойлеры. Давайте разберем что это такое, для тех, кто не в курсе.
Спойлер – это блок с информацией, который изначально скрыт от пользователей и появляется лишь тогда, когда пользователь нажмет на определенную кнопку. На моем сайте в виде спойлера сделаны ПРАВИЛА добавления комментариев. Если нажать на слово ПРАВИЛА, которое выделено, то ниже откроется блок с правилами.
Как писал Выше, покажу несколько способов, которые по своей сути похожи, но используют разные скрипты и осуществляют разную анимацию. Ниже представлены примеры.
Давайте по порядку разберем каждый из способов, чтобы Вы могли применить один из них у себя на сайте. Но перед тем как это сделать, давайте определимся с библиотекой jquery. Если вы ранее подключали ее, то приступайте к просмотру способов, если нет, то в шапке или подвале подключите.
Теперь поехали по порядку.
Способ №1
По сути самый простой из способов, при нажатии блок моментально появляется. При повторном нажатии моментально исчезает. Все просто. Данный способ использую и я.
Добавляем очень простенький скрипт. Его можно добавить непосредственно в то место где хотите вывести блок, можете подключить в шапке или подвале, а можете поместить его в файл, который потом подключить к сайту, опять же, где угодно.
Скрипт работает с блоком у которого присвоен класс spoiler-body и показывает его когда будет совершено нажатие на кнопку, блок или ссылку, в общем что угодно, у чего присвоен класс spoiler-title. Для показа блока, скрипт использует метод toggle.
Далее нужно вставить в нужное место, там где вы хотите видеть кнопку и блок, следующую html разметку:
Кнопкой, которая будет открывать станет текст внутри тега b, как и говорил, можете использовать любой тег.
Ну и присвоим минимальные стили. Главный параметр — это display:none у блока, который будет скрытым. Это обязательное условие, иначе не будет работать.
Больше ничего не нужно, все должно работать. Есть еще один момент. Можно сделать эту анимацию немного плавнее. Для этого в скобках после метода toggle добавьте значение в миллисекундах.
Например: toggle(500). Теперь открытие блока будет происходить не моментально, а пол секунды 0,5. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.
Способ №2
Для этого метода и для всех остальных, будут использоваться все те же блоки и классы, поэтому я не буду расписывать все заново. Отличаться будет лишь сам скрипт.
Данный способ плавно открывает блок и он появляется сверху вниз. Для появления, скрипт использует метод slideToggle.
Тут как и в первом варианте можно изменить время анимации. По умолчанию его значение равно 400 миллисекунд. Если желаете ускорить или замедлить, то в скобках добавьте значение.
Например: slideToggle(600).
Способ №3
Этот способ по сути как и второй, стой же анимацией, но в нем есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. В примере вы видели, это просто текст — Показать текст который при открытии блока, меняется на Скрыть текст.
Если добавить фантазию, то можно вместо текста добавить картинку или блок, который украсить стилями. Используется в этом способе, следующая функция.
Изменить время анимации можно по тому же методу, что и во втором способе.
В принципе все, это три основных метода, которые я хотел показать. Какой именно Вам подходит, решать Вам. Теперь Вы сможете без проблем организовать у себя блок, который появляется после нажатия на кнопку.
А Вы используете спойлеры у себя на сайте и для чего?
На этом все, спасибо за внимание. 🙂
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂
Html появляющийся блок при нажатии
1). Нам потребуется блок, в котором будет сидеть весь контент, и который будет плавно задвигаться-выдивгаться:
Script код выдвижного блока:
click_iks = document.querySelector (‘#iks’);
theid = document.querySelector (‘#theid’);
На нажатие(onclick) по крестику повесим функцию:
в которой и будем проверять наличие — отсутствие класса, который и будет выполнять движение влево вправо.
Проверяем содержит ли(contains) класс(classList) под именем hide в переменной theid:
Если да(блок задвинут), то hide удаляем, show добавляем:
theid . classList . remove(‘hide’);
theid . classList . add(‘show’ );
Если нет(блок выдвинут),то задвигаем панель.
theid . classList . add(‘hide’);
theid . classList . remove(‘show’);
click_iks = document.querySelector (‘#iks’);
theid = document.querySelector (‘#theid’);
click_iks . onclick = function( )
if ( theid . classList . contains(‘hide’) )
theid . classList . remove(‘hide’);
theid . classList . add(‘show’ );
theid . classList . add(‘hide’);
theid . classList . remove(‘show’);
Результат :плавное появление блока на странице при клике JavaScript
Альтернативный скрипт — Плавное появление и исчезание блока при нажатии JavaScript
Чем данный вариант пример №2 отличается от выше идущего пункта!?
1). Эти две строки не нужны, удалим их:
click_iks = document.querySelector (‘#iks’);
theid = document.querySelector (‘#theid’); 2). Заменим click_iks на название ид theid — так тоже будет работать! Только теперь блок может плавно выезжать и скрываться не только точно нажимая по крестику, но и в том месте, где невидимо развернут блок с id+theid :
if ( theid . classList . contains(‘hide’) )
theid . classList . remove(‘hide’);
theid . classList . add(‘show’ );
theid . classList . add(‘hide’);
theid . classList . remove(‘show’);
Все остальное копия первого варианта.
Плавное появление блока css при клике jquery
Чем отличается данный вариант плавного появления блока css при клике jquery — этот вариант скрипт написан на jquery. Естественно,что вы должны подключить jquery, нам понадобится:
Мы как-то разбирали несколько вариантов появление и исчезновение блока при перезагрузке страницы теория, живой пример, а эта тема основана на css той страницы, только с той разницей, что здесь мы данный код css, который отвечает за появление и исчезновения блока — будем присваивать этому блоку, после чего css должен сработать!
Единственное, что добавим… ещё нам потребуется движение влево
здесь вы можете расположить все,что угодно.
Делаем выпадающий по клику блок
Сейчас я покажу вам как легко создавать блоки которые появляются/исчезают по клику на другом объекте. Обычно они используются в меню, подсказках появляющихся при клике на элемент или просто когда надо скрыть по умолчанию какой-то блок.
Для начала создаем ссылку или абзац и задаем им id или class, чтобы можно было к ним обратиться.
После этого вставляем в вот такой код в страницу:
script type="text/javascript">// $(document).ready(function(){ $(".hider").click(function(){ $("#hidden").slideToggle("slow"); return false; }); }); // ]]> Некий текст содержащийся в данном блоке. По умолчанию он скрыт благодаря свойству display: none;