Верстка:
<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.