js Простой спойлер на jQuery 

Дата публикации  Дата изменения11.10.13  Комментарии15   Просмотры18466

Курсы

Простой спойлер на jQuery. Самый простой, имхо.

Пример использования:

Между <head></head>:

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

Между <body></body>:

<a onclick="$('#one').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a>

<div id="one" style="display: none;">Содержимое для показа</div>
  1. id в $('#one') и div id="one" должны быть одинаковы
  2. Для начального свернутого положения указывается style="display: none;" в блоке div
  3. slideToggle('slow') – скорость раскрытия (Строка, Число ). Строка представляет собой один из трех предустановленных режимов скорости (”slow”, “normal”, или “fast”). В качестве числа указывается значение в миллисекундах (например, 1000)
  4. Количество спойлеров (с разными id) на станице неограниченно; ссылка и соответствующий блок div могут находится в разных местах страницы; вложенность спойлеров неограниченна; контент – любой

Свернуть/Развернуть

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

Категории

Теги: , , ,

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

Рейтинг: 8.7/10 (30)


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

    Юрий

     

    При открытии страницы выходят оба спойлера как сделать чтобы они не открывались

    coder hol es

     

    Посмотрите внимательно соответствие вашего кода материалу – id должны быть уникальными, и для начального положения задан display: none

    Федор

     

    Самое простое и сердитое решение. Две строчки, а эффект супер…. Ну и что, что сделано в 13 году.

    Максим

     

    Было бы все так просто как этот слайдер. Вот то что надо, спасибо, ничего лишнего.

    coder hol es

     

    )Пожалуйста, рад)


 

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