JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

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;}
 .spoiler_links.bg_color {background: red;}

JavaScript

$(document).ready(function(){

  $('.spoiler_links').on('click',function(){
    if($(this).next().is(':visible')) {
      $(this).removeClass('bg_color').next().slideToggle(500);
    } else {
      $('.spoiler_links').removeClass('bg_color');
			$('.spoiler_body').slideUp(500);
			$(this).addClass('bg_color').next().slideToggle(500);
    };
  });
  
});