js Спойлер с плавным открытием/закрытием 

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

Курсы

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

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

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

Спойлер №1 (кликните для показа/скрытия)
Спойлер №2 (кликните для показа/скрытия)

 

Для получения точно таких же спойлеров, как в примере, показанном выше, добавьте на свой сайт следующий 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');

Бесплатные курсы

Категории: 

Теги: ,

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

Рейтинг: 7.8/10 (63)

Схожие по тегам статьи

КомментарииКомментарии:

    coder.hol.es /* Админ */

     

    Вы сделали вложенные div – в этом варианте спойлера это не работает. Наберите в поиске "спойлер" на этом сайте – есть варианты реализаций, допускающие бОльшую гибкость и вложенность – в том числе.

    Валодя

     

    ответ к самому первому вопросу – писал для себя. добавьте проверку if($(this).next('div').is(':hidden')){$("div[class^='spoiler_body']").hide('normal');}

    Айк

     

    А как сделать ГОРИЗОНТАЛЬНЫЙАККОРДЕОН ?

    coder hol es

     

    Как пример: http://coderhs.com/archive/accord_gor
    В общем-то, в инете реализаций достаточно – погуглите, что и найдется.

    Виктор

     

    Спасибо Володя, ваша проверка решила мою проблему. Админ, замени вот эту строчку в конце статьи
    "$("div[class^='spoiler_body']").hide('normal');"
    на вот эту
    "if($(this).next('div').is(':hidden'))
    {$("div[class^='spoiler_body']").hide('normal');}"
    И у людей будет меньше проблем с этим не закрывающимся спойлером при добавлении этой строчки

 

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