Плавный спойлер для сайта на 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 / 20:49 | JS/jQuery |   125 | 3   0