JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<button id="myelement">Toggle</button>
<p class="footable-detail-row">
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>

<button id="close-only">Close only</button>

JavaScript

$( "#myelement" ).click(function() {     
   if($('.footable-detail-row:visible').length)
        $('.footable-detail-row').hide("slide", { direction: "right" }, 1000);
    else
       $('.footable-detail-row').show("slide", { direction: "right" }, 1000);        
});

$("#close-only").click(function() {
	$('.footable-detail-row').hide();
});