JSFiddle - React, Tailwind, and code Playground
HTML
<div class="spoilers">
<div class="spoilerblock">
<a href="" class="spoiler_links">Spoiler1 <span class="icon"></span></a>
<div class="spoiler_body">
<p>
content
</p>
</div>
</div>
<div class="spoilerblock">
<a href="" class="spoiler_links">Spoiler2 <span class="icon"></span></a>
<div class="spoiler_body">
<p>
content
</p>
</div>
</div>
<div class="spoilerblock">
<a href="" class="spoiler_links">Spoiler3 <span class="icon"></span></a>
<div class="spoiler_body">
<p>
content
</p>
</div>
</div>
</div>
CSS
.spoiler_body {
display:none;
}
.spoiler_links {
cursor:pointer;
color:#5f6a70;
text-decoration:none;
display:block;
font-size:1em;
}
.spoiler_body {
font-size:0.9em;
}
.spoilerblock {
padding:1% 0;
border-bottom:1px solid #dddede;
}
.icon {
font-size:1.8em;
font-weight:bold;
color:#51758c;
display:inline-block;
float:right;
position:relative;
}
JavaScript
var icon = $('.spoiler_links');
icon.find('span').text('+');
$('.spoiler_links').click(function()
{
//сначала закроем все другие спойлеры
var $other_spoilers = $('a.spoiler_links').not(this);
$other_spoilers.siblings().hide('fast');
//и заодно вернем им плюсики
$other_spoilers.find('span').text('+');
// теперь собственно откроем кликнутый спойлер
// кстати, сын моего отца - мой брат ;) по-английски - сиблинг
// $(this).parent().children('div.spoiler_body').toggle('fast');
$(this).siblings().show('fast')
// фикс для минусов
// старый код выбирает ВСЕ спойлеры на странице, а нам нужен только кликнутый, правда?
//var icon = $('.spoiler_links');
// icon.find('span').text('-');
$(this).find('span').text('-');
return false;
});