Главная
Web-дизайн
Как сделать спойлер или появление блока при нажатии

Как сделать спойлер или появление блока при нажатии

Спойлер jQuery

Доброго времени суток. 🙂

В этом уроке хочу показать несколько способов, как можно сделать спойлеры. Давайте разберем что это такое, для тех, кто не в курсе.

Спойлер – это блок с информацией, который изначально скрыт от пользователей и появляется лишь тогда, когда пользователь нажмет на определенную кнопку. На моем сайте в виде спойлера сделаны ПРАВИЛА добавления комментариев. Если нажать на слово ПРАВИЛА, которое выделено, то ниже откроется блок с правилами.

Появление блока при нажатии

Как писал Выше, покажу несколько способов, которые по своей сути похожи, но используют разные скрипты и осуществляют разную анимацию. Ниже представлены примеры.



Пример

Давайте по порядку разберем каждый из способов, чтобы Вы могли применить один из них у себя на сайте. Но перед тем как это сделать, давайте определимся с библиотекой jquery. Если вы ранее подключали ее, то приступайте к просмотру способов, если нет, то в шапке или подвале подключите.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Теперь поехали по порядку.

Способ №1

По сути самый простой из способов, при нажатии блок моментально появляется. При повторном нажатии моментально исчезает. Все просто. Данный способ использую и я.

Добавляем очень простенький скрипт. Его можно добавить непосредственно в то место где хотите вывести блок, можете подключить в шапке или подвале, а можете поместить его в файл, который потом подключить к сайту, опять же, где угодно.

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
    $(this).next().toggle()});
});
</script>

Скрипт работает с блоком у которого присвоен класс spoiler-body и показывает его когда будет совершено нажатие на кнопку, блок или ссылку, в общем что угодно, у чего присвоен класс spoiler-title. Для показа блока, скрипт использует метод toggle.

Далее нужно вставить в нужное место, там где вы хотите видеть кнопку и блок, следующую html разметку:

Спойлер <b class="spoiler-title">Показать/скрыть</b>
<div class="spoiler-body">Скрытый текст, который появится при наведении</div>

Кнопкой, которая будет открывать станет текст внутри тега b, как и говорил, можете использовать любой тег.

Ну и присвоим минимальные стили. Главный параметр - это display:none у блока, который будет скрытым. Это обязательное условие, иначе не будет работать.

.spoiler-title{cursor:pointer;}
.spoiler-body{display:none;background:#f1f1f1;}

Больше ничего не нужно, все должно работать. Есть еще один момент. Можно сделать эту анимацию немного плавнее. Для этого в скобках после метода toggle добавьте значение в миллисекундах.
Например: toggle(500). Теперь открытие блока будет происходить не моментально, а пол секунды 0,5. Открывающийся блок появится по диагонали от верхнего левого угла к нижнему правому. Это Вы можете увидеть в примере выше.

Способ №2

Для этого метода и для всех остальных, будут использоваться все те же блоки и классы, поэтому я не буду расписывать все заново. Отличаться будет лишь сам скрипт.

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

<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler-title').click(function(){
  $(this).parent().children('.spoiler-body').slideToggle();
  return false;
 });
});
</script>

Тут как и в первом варианте можно изменить время анимации. По умолчанию его значение равно 400 миллисекунд. Если желаете ускорить или замедлить, то в скобках добавьте значение.
Например: slideToggle(600).

Способ №3

Этот способ по сути как и второй, стой же анимацией, но в нем есть одна интересная фишка. Меняется кнопка на которую нажали для открытия блока. В примере вы видели, это просто текст - Показать текст который при открытии блока, меняется на Скрыть текст.
Если добавить фантазию, то можно вместо текста добавить картинку или блок, который украсить стилями. Используется в этом способе, следующая функция.

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
    $(this).toggleClass('opened').toggleClass('closed').next().slideToggle();
    if($(this).hasClass('opened')) {
        $(this).html('Скрыть текст');
    }
    else {
        $(this).html('Показать текст');
    }
});
});
</script>

Изменить время анимации можно по тому же методу, что и во втором способе.

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

А Вы используете спойлеры у себя на сайте и для чего?

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(14 голосов, в среднем: 5 из 5)

Опубликовано 10 комментариев

  • Виталик
    Комментариев: 2

    А как сделать что бы блок появлялся не с левого верхнего угла по диагонали к нижнему правому а допустим просто слева направо?

  • Дмитрий
    Комментариев: 1

    Подскажите, как сделать так, что бы при нажатии на следующий спойлер, предыдущий закрывался?

  • Виталий
    Комментариев: 267

    Я думаю Вам подойдет больше эта статья http://gnatkovsky.com.ua/vertikalnoe-razdvizhnoe-menyu-na-jquery.html 🙂

  • LoOper
    Комментариев: 2

    при использовании третьего варианта, для тега , при клике на кнопку спойдер раскрывается, но название с кнопки исчезает и она уменьшается, при повторном нажатии спойлер закрывается, и кнокпа остется без надписей. В скрипте поменял "Скрыть текст" на "-" или "Close", а "Показать текст" на "+" или "Open". В чем может быть проблема?

    • Виталий
      Комментариев: 267

      Очень похоже на то, что у Вас конфликт стилей. То бишь, там где вы устанавливаете спойлер, что-то имеет такие же названия классов или к спойлеру применяются общие параметры Вашего сайта к блокам или к элементу b.

  • Дмитрий
    Комментариев: 1

    Если поменять местами
    Скрытый текст, который появится при наведении
    Спойлер Показать/скрыть
    то не работает появление, как сделать чтобы блок раскрывался вверх и кнопка была внизу ?

    • Виталий
      Комментариев: 267

      Если используете второй способ, то нужно немного изменить скрипт. Готовый станет таким:
      <script type="text/javascript">
      $(document).ready(function(){
      $('.spoiler-title').click(function(){
      $('.spoiler-body').slideToggle(500);
      });
      });
      </script>

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий