JSFiddle - React, Tailwind, and code Playground

by dezinezoo

HTML

<script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="cont">
<h3 class="trigger" id="frst">Section 1</h3> 
   <div class="toggle"> 
      <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p> 
   </div> 
<h3 class="trigger" id="scnd">Section 2</h3> 
   <div class="toggle"> 
      <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p> 
   </div> 
<h3 class="trigger" id="thrd">Section 3</h3> 
   <div class="toggle"> 
      <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p> 
</div>
<h3 class="trigger" id="frth">Section 4</h3> 
   <div class="toggle"> 
      <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p> 
   </div>
<h3 class="trigger" id="ffth">Section 5</h3> 
   <div class="toggle"> 
      <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p> 
</div>
<h3 class="trigger" id="sxth">Section 6</h3> 
   <div class="toggle"> 
      <p> Blah blah blah Blah blah blah Blah blah blah Blah blah blah </p> 
   </div>
 </div>

CSS

.toggle {
 width:100px;
 color:grey;
 display:block;
}

.trigger {
 cursor:pointer; 
}

JavaScript

$(".toggle").hide();                                         //Hide .toggles

$(window).load(function(){
  $('.toggle').not(':hidden')
      .prev('.trigger').trigger("click");                    //Simulate click on visible .toggle(s) h3(s)
});

$('.trigger').each(function() {                              //For each .trigger
    var theActive = $.cookie($(this).attr('id'));            //Retrieve the cookies
    if (theActive) {                                         //Verify if cookies exist
        $('#' + theActive).next(".toggle").slideDown(300);   //And slide down the respective .toggle
    }

});

$(".trigger").toggle(                                        //Toggle permits alternate clicks
   function() {
    $(this).next('.toggle').slideDown(300);               //On odd clicks, .toggle slides down...
    $.cookie($(this).attr('id'), $(this).attr('id'));        //...and the cookie is set by its ids.
}, function() {
    $(this).next('.toggle').slideUp(300);                 //On even clicks, .toggle slides up...
    $.cookie($(this).attr('id'), null);                      //...and the cookie is deleted.
});