Плавный спойлер для сайта на jQuery

данной статье я хочу показать пример реализации спойлера на jQuery, который будет плавно отображать и скрывать текст. Все что нам потребуется — это библиотека jQuery.

Ниже приведен код. Начнем с верстки:

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>Плавный спойлер для сайта на jQuery</title>
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
  6.     <style>
  7.         .spoiler_title{
  8.             font-size: 16px;
  9.             border-bottom: #000000 dashed 1px;
  10.             cursor: pointer;
  11.         }
  12.         .spoiler_block{
  13.             display: none;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <label class="spoiler_title">Заголовок спойлера(Кликайте!)</label>
  19.     <p class="spoiler_block"> 
  20.         Текст спойлера, который отображается по клику на заголовок.
  21.     <br/> Вторая строка
  22.     </p> 
  23. </body>
  24. </html>

и теперь самое интересное — javaScript, который оживит наш спойлер:
  1. $(document).ready(function(){
  2.     $('.spoiler_title').click(function(){ // при клике по заголовку спойлера
  3.         var show = $(this).attr('show'); // проверяем атрибут, в котором записано - отображен спойлер или скрыт
  4.         if(show == 1){ // если отображен, то прячем
  5.             $(this).attr('show', 0);
  6.             $('.spoiler_block').slideUp(300);
  7.         }else{ // если спрятан, то показываем
  8.             $(this).attr('show', 1);
  9.             $('.spoiler_block').slideDown(300);
  10.         }
  11.     });
  12. });

  20.04.24 / 17:49 | JS/jQuery |   146 | 3   0