JSFiddle - React, Tailwind, and code Playground

by evild70

HTML

<div id="accordion-container">
    <div id="section">
        <h1 class="section-header">Overview</h1>
        <div id="section-content" style="display:block;">Overview Content</div>
    </div>
    
    <div id="section">
        <h1 class="section-header">About Us</h1>
        <div id="section-content">About Us Content</div>
    </div>
    
    <div id="section">
        <h1 class="section-header">History</h1>
        <div id="section-content">History Content</div>
    </div>
</div>

CSS

#section-content { display:none; padding-left:20px; }

JavaScript

$(document).ready(function() {

    $("h1.section-header").click(function() {
        var target = $(this);
        $('#accordion-container #section #section-content').each(function(index, e) {
            $(this).slideUp(500, 'linear');
        });
        animationDone(target);
    });

    function animationDone(target) {
        target.next("#section-content").slideDown(500);
        return false;
    }
});