JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div class="accordionButton">Button 1 ыыыContent</div>
        <div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
        <div class="accordionButton">Button 2 Content</div>
        <div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
        <div class="accordionButton">Button 3 Content</div>
        <div class="accordionContent">Content ыы1<br />Short Example</div>
        <div class="accordionButton">Button 4 Content</div>
        <div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
    </div>

CSS

.accordionButton{background-color: blue; color: white; border-bottom: 1px solid white; padding-left: 15px; cursor: pointer;}
.accordionContent{background-color: green; display: none;}

JavaScript

$('.accordionButton').bind('click',function(){
    var $next = $(this).next();
    if (!$next.is(':visible')){
        $('.accordionContent:visible').slideUp();
        $next.slideDown();
    } else {
        $next.slideUp();
    }
});