JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<div id="accordion">

<div class="title"><span>Accordian 1</span></div>
<div class="hide">

  <p>hidden content</p>

</div>

<div class="title"><span>Accordian 2</span></div>
<div class="hide">

  <p>hidden content</p>

</div>


<div class="title"><span>Accordian 3</span></div>
<div class="hide">

   <p>hidden content</p>

</div>

<div class="close"><span>Close all the accordions</span></div>

</div>

JavaScript

$(document).ready(function() {    
   $('#accordion .hide').hide();
   $('#accordion .title span').click(function(){
           $(this).parent().next().slideToggle()
                  .siblings('.hide').slideUp();
           return false;
   });
    $('.close').click(function(){
        $('#accordion .hide').slideUp();
    });
});