JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">

<div class="demo">
    
    <div id="accordion">
        <h3><a href="#">Section 1</a></h3>
        <div>
            Section 1 content
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>
            Section 2 content
        </div>
        <h3><a href="#">Section 3</a></h3>
        <div>
            Section 3 content
        </div>
    </div>
    
</div>

</div>

<div class="demo-description">
    <p>
        <div id="changeEvent">Change Event</div>
    </p>
    <p>
        <div id="readEvent">Read Event</div>
    </p>
    <p id="eventStatus">
        Display event Status here
    </p>
</div>

JavaScript

$(document).ready(function() {
    $("#accordion").accordion();
    $("#readEvent").bind('click', function() {
        var event = $("#accordion").accordion("option", "event");
        $("#eventStatus").text(event);
    });
    $("#changeEvent").bind('click', function() {
        $("#accordion").accordion("option", "event", 'mouseover');
        alert("Change event to " + $("#accordion").accordion("option", "event"));
    });

});

function showEventStatus() {
    //var event = $( "#accordion" ).accordion( "option", "event" );
    //$("#eventStatus").text(event);
    alert('Show');
}

function changeEvent() {
    //$( "#accordion" ).accordion( "option", "event", 'mouseover' );
    alert('Change');
}