Скрипт для открытия спойлеров

Верстка:

<div class="spoiler_contaier">
       <div class="spoiler">
             <a href="" class="spoiler_links">Откройте меня <span class="plus_minus">+</span></a>
             <div class="spoler_body">
                     <p>Какое-то содержимое</p>
                     <p>Какое-то содержимое</p>
              </div>
       </div>
       <div class="spoiler">
              <a href="" class="spoiler_links">Откройте меня <span class="plus_minus">+</span></a>
              <div class="spoler_body">
                     <p>Какое-то содержимое</p>
                     <p>Какое-то содержимое</p>
              </div>
       </div>
       <div class="spoiler">
              <a href="" class="spoiler_links">Откройте меня <span class="plus_minus">+</span></a>
              <div class="spoler_body">
                     <p>Какое-то содержимое</p>
                     <p>Какое-то содержимое</p>
              </div>
       </div>
       <div class="spoiler">
              <a href="" class="spoiler_links">Откройте меня <span class="plus_minus">+</span></a>
              <div class="spoler_body">
                     <p>Какое-то содержимое</p>
                     <p>Какое-то содержимое</p>
              </div>
       </div>
</div>

Стили:

* {box-sizing: border-box;}
body {font-family: Arial;}
.spoiler_contaier {width: 600px; margin: 100px auto;}
.spoiler {background: gray; border-radius: 30px; margin-bottom: 10px;}
.spoiler_links {position: relative; display: block; padding: 16px 0 18px 28px; margin-bottom: 5px; background: #000; color: #fff; border-radius: 30px; text-decoration: none;}
.spoiler_links .plus_minus {position: absolute; width: 42px; height: 42px; line-height: 45px; border-radius: 100%; right: 6px; top: 50%; margin-top: -21px; background: blue; text-align: center; display: block;}
.spoler_body {display: none; background: gray; border-bottom: 6px solid blue; padding: 15px 20px; margin-bottom: 5px;}
p {font-size: 18px;}

Скрипт для открытия и закрытия спойлеров:

$(document).ready(function(){
   $('.spoiler_links').click(function(){
      if ($(this).parent().children('div.spoler_body').css("display")=="none") {
         $("div[class^='spoler_body']").hide('normal');
         $(this).parent().children('div.spoler_body').toggle('normal');
         $('div[class^="spoler_body"]').closest('.spoiler').find('.plus_minus').html("+");
         $(this).closest('.spoiler').find('.plus_minus').html("-");
      }
      else {
         $("div[class^='spoler_body']").hide('normal');
         $(this).closest('.spoiler').find('.plus_minus').html("+");
      }
      return false;
   });
});

Таким образом, при клике на элемент с классом .spoiler_links происходит проверка состояния div.spoler_body. И в случае, если у div.spoler_body display == none, срабатывает условие и все открытые спойлеры закрываются, а текущий открывается. Если же текущий спойлер открыт, то ко всем div.spoler_body применяется метод hide.



bitrixone © 2024