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()
 	{
		  $(this).parent().children('div.spoiler_body').toggle('fast');
		  var icon = $('.spoiler_links');
		  icon.find('span').text('-'); 
		  return false;
 	});