Как сделать спойлеры на javascript


Как сделать спойлеры на javascript
Как сделать спойлеры на javascript
Как сделать спойлеры на javascript
Как сделать спойлеры на javascript
Как сделать спойлеры на javascript

Дата публикации25.01.13  Дата изменения25.01.15  Комментарии16   Просмотры39758

Курсы

Пример использования:
Между <head></head>:

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

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

Текст по спойлером
плавно появляется
и плавно исчезает
при клике по спойлеру

А это уже другой спойлер!
И он тоже работает!

 

Для получения точно таких же спойлеров, как в примере, показанном выше, добавьте на свой сайт следующий JavaScript код, отвечающий за плавное открытие и скрытие спойлеров:

<script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script>

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

<div> <a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)</a> <div class="spoiler_body"> Текст под спойлером<br> плавно появляется<br> и плавно исчезает<br> при клике по спойлеру </div> </div> <!--//--> <div> <a href="" class="spoiler_links">Спойлер №2 (кликните для показа/скрытия)</a> <div class="spoiler_body"> А это уже другой спойлер!<br> И он тоже работает! </div> </div>

Обращаем Ваше внимание на то, что каждый спойлер должен быть заключен между тегами <div></div>. Это необходимо для того чтобы каждый спойлер открывался и закрывался отдельно, а не все сразу.

Для того, чтобы при загрузке странички, все спойлеры изначально были закрыты и курсор мышки изменялся при наведении на спойлеры, необходимо добавить в шапку сайта между тегами <head> и </head> следующий код:

<style type="text/css"> .spoiler_body {display:none; cursor:pointer;} </style>

При необходимости можно добавить кнопки "Закрыть все" и "Открыть все" спойлеры. Для этого добавьте вот такой код:

<input type="button" value="Закрыть все" onclick=$("div[class^='spoiler_body']").hide('normal')> <input type="button" value="Открыть все" onclick=$("div[class^='spoiler_body']").show('normal')>

А чтобы при открытии 2-го спойлера 1-й закрывался автоматически:

После $('.spoiler_links').click(function(){ добавьте строчку:
$("div[class^='spoiler_body']").hide('normal');

 Источник 

Бесплатные курсы
Категории: JS

Теги: jquery, спойлер

Оцените материал:

Рейтинг: 7.1/10 (47)

Схожие по тегам статьи КомментарииКомментарии:

Старые →← Новые

RSS | Atom

QR-код страницы Недавно просмотренные TOP-5 Конвертация картинок из растра в вектор (65377) 301 редирект в файле .htaccess. Примеры (62488) Спойлер с плавным открытием/закрытием (39759) Подгрузка контента без перезагрузки страницы (36338) Текущий url в JS (26465) Курсы Облачко тегов

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

wmid-qrqr-yandex-wallet Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript Как сделать спойлеры на javascript

Статьи по теме:



Как сшить зайчика своими руками пошагово

Конверт для новорожденных на выписку крючком схемы и описание

Поздравления с днем рождения подруге юности в прозе

Кармашек в кроватку своими руками

Схема розетки к стиральной машинке