JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accItem">
    <div class="togHead">Heading</div>
    <div class="togContent">The content.</div>
</div>

<div class="accItem">
    <div class="togHead">Heading</div>
    <div class="togContent">The content.</div>
</div>

CSS

.togHead{
    width:300px;
    background:#000;
    color:#fff;
    font-size:20;
    font-weight:bold;
    cursor:pointer;
}
.togContent{
    display:none;
    width:300px;
    background:#ff0;    
}

JavaScript

//Basic Accordion
$('.togContent:first').slideDown();
    $('.togHead').click(function(){
        var item = $(this).parent().find('.togContent');
        if (! $(item).is(':visible')){
            $('.togContent').slideUp();
            $(item).slideDown("fast");
        }            
    });