Просмотров: 45273

Как сделать чтобы при клике по ссылке меня

Закрыть ... [X]

Главная 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 блок код появление скрипт спойлер


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


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

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


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

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

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

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


Источник: http://gnatkovsky.com.ua/kak-sdelat-spojler-ili-poyavlenie-bloka-pri-nazhatii.html



Рекомендуем посмотреть ещё:



Похожие новости


Инструкция пошагового создания сайта
Какую можно сделать прическу в домашних условиях на каре
Макияж для глаз в домашних условиях с фото
Вино из вишен своими руками
Как сделать светящаяся вода в домашних условиях


Как сделать чтобы при клике по ссылке меня
Как сделать чтобы при клике по ссылке меня


Javascript - Как сделать чтобы при клике по элементу балуна (в кластере.)
Выпадающее меню при клике - Форум WebForMyself - Основы Самостоятельного



ШОКИРУЮЩИЕ НОВОСТИ