JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion">
    <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3>
    <div> Good Morning Stackoverflow</div>
    <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3>
    <div>Buongiorno Stackoverflow</div>
    <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3>
    <div>Bonjour Stackoverflow</div>
</div>

JavaScript

$(function() {
        var icons = {
            header: "ui-icon-circle-arrow-e",
            headerSelected: "ui-icon-circle-arrow-s"
        };
        $( "#accordion" ).accordion({
            icons: icons,
            collapsible: true
        });
        $( "#header1" ).click(function(e) { return false;
            $( "#accordion" ).accordion( "option", "icons", false );
        });
});

$('#accordion .accClicked')
        .off('click')
    .click(function(){
        $(this).next().toggle('fast');
    });