JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<table>
  <tbody>
    <tr>
      <td>
        <div class="container">
          <a href="" class="spoiler_links"><strong>спойлер</strong></a>
          <div class="spoiler_body">
            <p>текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
          </div>
        </div>
        <div class="container">
          <a href="" class="spoiler_links"><strong>спойлер</strong></a>
          <div class="spoiler_body">
            <p>текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <a href="" class="spoiler_links"><strong>спойлер</strong></a>
          <div class="spoiler_body">
            <p>текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
          </div>
        </div>
        <div class="container">
          <a href="" class="spoiler_links"><strong>спойлер</strong></a>
          <div class="spoiler_body">
            <p>текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

td {
  margin: 10px;
  vertical-align: top;
  min-width: 400px;
  max-width: 400px;
}

.spoiler_body{
  display: none;
  color: #6B8841;
}
.spoiler_links{  
  font-size: 20px;
  text-decoration: none;
  color: #6B8841;
  border-bottom: 1px dashed #6B8841;
}
.spoiler_links_current {
  border-bottom: 1px dashed transparent;
}

JavaScript

$(document).ready(function() {
  $('.spoiler_links').click(function(e) {
    e.preventDefault();        
    $('.spoiler_links_current').removeClass('spoiler_links_current');      
    $(this).toggleClass('spoiler_links_current');    
    $('.spoiler_body').slideUp();   
    $(this).next().slideDown();   
  });  
});