JSFiddle - React, Tailwind, and code Playground

by j0b02py

HTML

<div class="accordion">
    <h3>Section 1</h3>
    <div class="accordion__content">
        <p>test</p>
    </div>
</div>
<div class="accordion">
    <h3>Section 2</h3>
    <div class="accordion__content">
        <p>test</p>
    </div>
</div>

CSS

h3 {
    display: block;
    background-color: pink;
    color: #fff;
}
.accordion__content {
    overflow: hidden;
    height: 0;
    transition: height 700ms ease-in;
}
.accordion__content--displayed {
    height: 100px;
    transition: all 700ms ease-in;
}

JavaScript

$(function () {
    $('.accordion h3').click(function () {
        $(this).next('.accordion__content').toggleClass('accordion__content--displayed');
    });
});