JSFiddle - React, Tailwind, and code Playground
HTML
<div class="spoiler_links">Спойлер №1</div>
<div class="spoiler_body">
Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию.
</div>
<br><br>
<div class="spoiler_links">Спойлер №2</div>
<div class="spoiler_body">
Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию. Мы настолько уверены в качестве нашей методики, что заключаем договор на оказание услуг и даем юридическую гарантию.
</div>
CSS
.spoiler_body {display:none;}
.spoiler_links {cursor:pointer;}
JavaScript
$(document).ready(function(){
$('.spoiler_links').on('click',function(){
$('.spoiler_links').removeClass('bg_color');
if($(this).next().is(':visible')) {
$(this).next().slideToggle(500);
$(this).addClass('bg_color').next('.spoiler_body').show('normal');
} else {
$('.spoiler_body').slideUp(500);
$(this).next().slideToggle(500);
};
});
});