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

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

Главная 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>

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

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

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

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


Метки: javascript jQuery блок код появление скрипт спойлер


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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

Проголосовало: 28, в среднем: 5 из 5


Предыдущая запись
Как сделать кнопку «Наверх» как ВКонтакте

Следующая запись
Четные и нечетные посты на главной WordPress

Похожие записи:
  • Плавный переход по всем якорным ссылкам, якорям на сайте
    Плавный переход по всем якорным ссылкам, якорям на сайте
  • Как сделать адаптивное видео YouTube на сайте
    Как сделать адаптивное видео YouTube на сайте
  • Красивый ползунок выбора значения. UI ползунок на сайт
    Красивый ползунок выбора значения. UI ползунок на сайт
  • Изменение, создание, всплывающих подсказок title с помощью CSS
    Изменение, создание, всплывающих подсказок title с помощью CSS
  • Фиксированная, открывающаяся, боковая панель, для меню на сайт
    Фиксированная, открывающаяся, боковая панель, для меню на сайт

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

Как сделать спойлер или появление блока при 3
КГ-Портал - всё о кино, видеоиграх, сериалах и аниме
Как сделать спойлер или появление блока при 65
Автомобильный информационный портал в
Как сделать спойлер или появление блока при 66
Daewoo Nexia (Дэу Нексия) тюнинг и ремонт
Как сделать спойлер или появление блока при 76
Официальный сайт Андрея Малахова
Как сделать спойлер или появление блока при 92
Компьютерные игры на PC / Игры на
Как сделать спойлер или появление блока при 57
Поиск запчастей, шин и дисков
Как сделать спойлер или появление блока при 45
Облачный атлас КиноПоиск
Как сделать спойлер или появление блока при 13
Новости Макс Барских
Как сделать спойлер или появление блока при 98
17 милых и простых причесок в школу за 5 минут
Как сделать спойлер или появление блока при 62
Cached
Как сделать спойлер или появление блока при 70
Как сделать спойлер или появление блока при 55
Как сделать спойлер или появление блока при 26
Как сделать спойлер или появление блока при 52
Как сделать спойлер или появление блока при 20
Как сделать спойлер или появление блока при 38
Как сделать спойлер или появление блока при 43
Как сделать спойлер или появление блока при 97