JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="content_horses" id="page">
  <div class="accordeon" class="een">
    <div class="sientje">
      <div class="name">
        SIENTJE
      </div>
      <div class="expand">
        <div class="more">MORE</div>
      </div>
      <div class="text">
        <div class="sientje_t">
            decfc45t54t
        </div>
      </div>
    </div>
  </div>
  <div class="accordeon" class="twee">
    <div class="sientje">
      <div class="name">
        SIENTJE
      </div>
      <div class="expand">
        <div class="more">MORE</div>
      </div>
      <div class="text">
        <div class="sientje_t">
          4rc4t4t4t
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $(".text").hide();
  $(".expand").click(function() {
    $(".text").slideUp(500);
    $(".expand").text('MORE');
    if ($(this).next(".text").is(":visible")) {
      $(this).next(".text").slideUp(500);
    } else {
      $(this).next(".text").slideToggle(500);
      $(this).text('LESS');
    }
  });
});