JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">
  <h3 class='headAcc'>First header</h3>
  <div>First content panel</div>
  <h3 class='headAcc'>Second header</h3>
  <div>Second content panel</div>
</div>

<button> Get Index</button>

JavaScript

$('#accordion').accordion({
});

//suppose you want to show thee index which starts some text 
var indexToActivate = $('.headAcc:contains("Second header")').index();
indexToActivate=indexToActivate-1; //index is zero based for jquery ui. 
alert('Index To activate is :' + indexToActivate);
$('button').on('click',function(){
    var active = $( "#accordion" ).accordion( "option", "active" ); //getter 
    alert('Current Index is ' + active +" ");
    $( "#accordion" ).accordion( "option", "active",indexToActivate );
     var active = $( "#accordion" ).accordion( "option", "active" ); //getter 
 alert('Current New Index is ' + active +" ");
});