JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
    <h3>Some question</h3>
    <p>Some answer</p>
</div>

CSS

.accordion {
    
}

.accordion h3 {
    margin: 0;
    cursor: pointer;
}

.accordion p {
    margin: 20px 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
}

.accordion h3.open + p {
    max-height: 100px;
}

JavaScript

$(function () {
    var h3s = $('.accordion h3');
    
    h3s.click(function () {
        h3s.removeClass('open');
        $(this).addClass('open');
    });
});