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>

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

  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »
  • Администратор: к записи Это надо использовать функции вашей CMS. »
  • Alex: к записи Ребят, а подскажите пожалуйста, как реализовать с »
  • Владимир: к записи А как теперь будет выглядеть ссылка для перехода н »
  • Администратор: к записи Не знаю. »

Статистика спама

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