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