JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accd">
<h3 class="accd">Panel 01</h3>
<p class="accd">content<br>content<br>content<br>content<br>content<br>content<br></p>
<h3>Panel 02</h3>
<p>content<br>content<br>content<br>content<br>content<br>content<br>content<br></p>
<h3>Panel 03</h3>
<p>content<br>content<Runbr>content<br>content<br></p>
</div>

CSS

div.accd{width:250px;margin:25px;}
.over ,
.select{background:yellow;}

p.accd{background:#efefef;height:150px;}

h3.accd{background:#f7f7f7;cursor:pointer;}

p,h3{padding:10px;}

JavaScript

$("p:not(:first)").css("display", "none");
    $("h3:first").addClass("select");
    $("div h3").click(function() {
        var cont = $(this).next();
        if ($(cont).css("display") == "none") {
            $("p").slideUp("fast");
            $(cont).slideDown("fast");
            $("h3").removeClass("select");
            $(this).addClass("select");
        }
    }).hover(
    function() {
        $(this).addClass("over");
    },
    function() {
        $(this).removeClass("over");
    });