JSFiddle - React, Tailwind, and code Playground

HTML

<h2><a href="#" class="link1">Headline One</a></h2>
<div class="toggle-item-link1">content</div>

<h2><a href="#" class="link2">Headline Two</a></h2>
<div class="toggle-item-link2">content</div>

JavaScript

$(function() {

    $('[class^=toggle-item]').hide();
    //toggle content on click
    $('[class^=link]').click(function() {
        var $toggleItem = $('.toggle-item-' + $(this).attr("class"));
        var $toggleLink = $(this);
        $toggleItem.slideToggle(function() {
            var $stateSpan = $('<span class="state"></span>');
            $toggleItem.is(':visible') ? $stateSpan.text('Close ') : $stateSpan.text('Open ');
            $toggleLink.children('.state').remove().end().prepend($stateSpan);
        });
    }).prepend($('<span class="state">Open </span>'));

});