JQuery spoiler

JQuery в примерах, что называется. Привожу исходники реализации простого спойлера (раскрывающегося блока  с текстом, картинками и т.д.) с применением возможностей JQuery.

Код на JavaScript будет нижеследующим:

$(document).ready(function(){
  $('.jquery-spoiler .invisible').hide();
  $('.jquery-spoiler a').toggle(
    function(){
      $(this).siblings('.invisible').stop(false, true).slideDown(100);
      $(this).html('Скрыть блок');
    },
   function(){
      $(this).siblings('.invisible').stop(false, true).slideUp(100);
      $(this).html('Показать блок');
   }
 );
});

Используем .toogle(). Для плавного показа / скрытия применяем .slideDown() / .slideUp() с задержкой в 100 миллисекунд.

При этом HTML-разметка будет такой:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
  <meta charset="UTF-8" />
  <title>JQuery в примерах: спойлер</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
  <script type='text/javascript' src='script.js'></script>
</head>
<body>
  <div>
    <a href="#">Показать блок</a>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam [...]</p>
  </div>
</body>
</html>

Раскрытый JQuery спойлер выглядит вот так:

JQuery спойлер

Свернутый JQuery спойлер выглядит вот так:

JQuery раскрывающийся текст

Скачать
Опубликовано 3-02-2013 в 14:35


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты