JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="header"> Title 1 </h3>
<div class="content" id="content-1"> Content 1 </div>
<h3 class="header"> Title 2 </h3>
<div class="content" id="content-2"> Content 2 </div>

CSS

.header.open { background-color: green; }

JavaScript

function tabOpened(e, panel) {
    alert("opened " + $(panel).attr("id"));
}
function tabClosed(e, panel) {
    alert("closed " + $(panel).attr("id"));
}

(function($) { // closure to make sure jQuery = $
    $(function() { // on document load
        $(".header").click(function(e) { // select headers and set onClick event handler
            // here you can maybe add a class to an opened header like this
            $(this).toggleClass("open");
            $(this).next().toggle("slow", function() { // toggle visibility
                // what you write here will be executed after the animation
                // "this" will refer to the hidden/revealed div element
                // if you want to call a function depending on if the 
                // panel was opened or closed try this
                if ( $(this).is(":visible")) {
                    tabOpened(e, this);
                } else {
                    tabClosed(e, this);
                }
            });
        }).next().hide();
    });
})(jQuery);