JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)</a>
<div class="destination">

  <div class="spoiler_body">
    Текст под спойлером
    <br> плавно появляется
    <br> и плавно исчезает
    <br> при клике по спойлеру
  </div>
</div>

<a href="" class="spoiler_links">Спойлер №2 (кликните для показа/скрытия)</a>
<div class="destination">


  <div class="spoiler_body">
    А это уже другой спойлер!
    <br> И он тоже работает!
  </div>
</div>


<a href="" class="spoiler_links">Спойлер №2 (кликните для показа/скрытия)</a>
<div class="destination">


  <div class="spoiler_body">
    А это уже другой спойлер!
    <br> И он тоже работает! 3
  </div>
</div>


<a href="" class="spoiler_links">Спойлер №2 (кликните для показа/скрытия)</a>
<div class="destination">


  <div class="spoiler_body">
    А это уже другой спойлер!
    <br> И он тоже работает! 44
  </div>
</div>

CSS

.spoiler_links {
   cursor: pointer;
   border: 1px solid #333;
   display: inline-block;
   padding: 5px 15px;
   text-decoration: none;
   color: #000;
 }
 
 .spoiler_links:hover {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   background: linear-gradient(to bottom, #fcfff4, #e9e9ce);
   color: #a00;
 }

JavaScript

$(document).ready(function() {
  $('.spoiler_links').click(function() {
    $(this).parent().children('div.spoiler_body').toggle('normal');
    return false;
  });
  var x = document.getElementsByClassName('spoiler_links'),
      xx = document.getElementsByClassName('destination'),
      sp = document.getElementsByClassName('spoiler_body'); 
  $(x).each(function( index ) {
  	if (this) {sp[index].setAttribute('style', 'display:none;');}
 		$(this).attr('id', index);
    $('#' + index).prependTo(xx[index]);
  });
});