JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
    <div class="container">
        <div class="header">Header 1</div>
        <div class="content">Lorem Ipsum 1</div>
    </div>
    <div class="container">
        <div class="header">Header 2</div>
        <div class="content">Lorem Ipsum 3</div>
    </div>
    <div class="container">
        <div class="header">Header 3</div>
        <div class="content">Lorem Ipsum 3</div>
    </div></div>

CSS

.container {
    margin: 0 0 3px;
    border: 1px solid #000;
}
.header {
    padding: 3px;
    background: #eee;
    cursor: pointer;
}
.content {
    border-top: 1px solid #000;
}

JavaScript

$(function() {
    $('.accordion .container:not(:first) .content').hide();
    $('.accordion .header').click(function(e) {
        $('.accordion .content:visible').slideUp();
        $(this).next().slideDown();
        e.preventDefault();
    });
});