JSFiddle - React, Tailwind, and code Playground

by mayanksaxena19

HTML

<input id='hidAccordionIndex' type='hidden' value= 0/>
<div id="accordion">
    <a href="#one" class="first">Recent Posts</a>
    <div id="one">
        this is some info.
    </div>
    
    <a href="#two">Popular Posts</a>
    <div id="two">
        this is some more info.
    </div>
    
    <a href="#three">Archived Posts</a>
    <div id="three">
        this is even more info.
    </div>
</div>

JavaScript

$(function(){

$( "#accordion" ).accordion({
  activate: function( event, ui ) {
      $('#hidAccordionIndex').val($( "#accordion" ).accordion( "option", "active" ));
  }
});

$( "#accordion" ).accordion( "option", "active", parseInt($('#hidAccordionIndex').val(),10) );
    
});