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).siblings().show('fast')
// а теперь мы его переключаем - toggle
// но теперь нам придется-таки проверить, закрылся он или открылся
// чтобы поставить ему "-" или "+" по окончании анимации
$(this).siblings().toggle('fast', function() {
var $icon = $(this).siblings('a.spoiler_links').find('span')
if ($icon.text() == '+') {
$icon.text('-')
} else {
$icon.text('+')
}
})
return false;
});