аватар Автор: Никита Иванов | 29 мая 2014 12:42

Статьи / jQuery /

Плавное открытие и скрытие блока div средствами jQuery

Практически на каждом сайте Вы можете увидеть кнопки - Подробнее, Информация, Открыть/Скрыть информацию и подобные им. При нажатии на них плавно раскрывается блок с соответствующей информацией. Как это реализовать?

Достаточно просто. При помощи JS (библиотеки jQuery). Подключим её с сервера Google:

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

Теперь пример целиком. Чтобы не разбирать его по частям и не путать Вас, прокомментирую все основные моменты прямо в нём.

<!DOCTYPE html>
<html>
<head> 
  <!-- Подключаем jQuery -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

  <!-- Скрипт плавного открытия и закрытия блока -->
  <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 

</head> 
<body> 

  <a href='#' id='trigger'>Открыть/скрыть информацию</a> <!-- Всё происходит при нажатии на ссылку -->
  <div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>Содержимое скрытого блока</div> 

</body> 
</html>

Не забываем, что в данном примере происходит удалённое подключение jQuery. На локалке без доступа в интернет пример работать не будет.
Смотрим результат работы открытия и скрытия блока на jQuery:

Демонстрация Скачать исходники


На будущее: подобное формирование скрытой информации достаточно сильно экономит место на сайте, не делает его информационно перезагруженным и используется почти на всех ресурсах!


Как создать спойлеры на jquery или несколько блоков открыть/закрыть?


По многочисленным просьбам читателей создаю отдельный раздел с примером и файлами для скачивания. Если у Вас несколько блоков-спойлеров, которые нужно плавно открывать и закрывать на jquery, если нужны команды закрыть или открыть всё, то смотрим пример ниже:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Спойлеры</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    
    
<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_links').click(function(){
  $(this).parent().children('div.spoiler_body').toggle('normal');
  return false;
 });
});
</script>
    
<style type="text/css">
 .spoiler_body {display:none;}
 .spoiler_links {cursor:pointer;}
</style>
    
  </head>
  <body>
  
  
<div>
 Спойлер №1 <a href="" class="spoiler_links">показать / скрыть</a>
 <div class="spoiler_body">
  Текст в первом спойлере
  Текст в первом спойлере
 </div>
</div>

<div>
 Спойлер №2 <a href="" class="spoiler_links">показать / скрыть</a>
 <div class="spoiler_body">
  Текст во втором спойлере
  Текст во втором спойлере
 </div>
</div>    
    

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

Пример собран полностью. Нужно лишь только подключение к Интернету, чтобы с Google-библиотек загрузился jQuery.

Демонстрация Скачать исходники


Спасибо за внимание! Экономьте место и не перегружайте сайт вторичным текстом!)
 



Распечатать
Похожие статьи
26 апреля 2014 16:43 Простые примеры работы jQuery, Ajax и PHP
07 мая 2014 11:23 Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery?
18 июня 2013 14:12 Создаём всплывающее модальное окно jQuery
17 октября 2013 12:57 Как очистить код вставленный в WISYWIG редактор из MS Word?
14 апреля 2014 13:45 Как создать адаптивный (резиновый) дизайн сайта на jQuery?


Комментарии к статье (vk.com)