JSFiddle - React, Tailwind, and code Playground

HTML

<div class="show">
  <span class="label">Afficher</span>
</div>

<div class="cat">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempor diam. Suspendisse potenti. Aenean adipiscing faucibus luctus. Vivamus euismod bibendum est, vel pharetra massa consectetur sed. Proin hendrerit nulla ut felis scelerisque posuere. Nulla facilisi. Vestibulum hendrerit nullam.</p>
</div>

CSS

.cat {
  display: none;
}

/**
 * on modifie le curseur
 * on bloque la selection accidentelle en cas de double-click
 */ 
.show {
  cursor: pointer;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

JavaScript

// mise en cache des objets
var $show = $(".show");

$show.click(function() {
  var $cat = $(this).next(".cat");
  
  // si l'animation est en cours on ne fait rien et on quitte la fonction
  // 1ère prevention du double-click
  if ($cat.is(":animated")) {
    return false;
  }
  
  // le texte du bouton
  var $label = $(this).find(".label");
  var label_text = $cat.is(":hidden") ? "Masquer" : "Afficher";
  
  $cat.slideToggle(500, function() {
    $label.text(label_text);  
  });
});

// en cas de double click on bloque l'effet
// peut-être utile si le l'animation est très rapide
$show.dblclick(function(e){
  e.stopPropagation();
  e.preventDefault();
  return false;
});