JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="toggle">
       
                    Hello

       
        </div>

        <div class="hidden">Hidden Text</div>

CSS

.toggle{padding:15px;border-bottom:1px solid #ccc;list-style-type:none;}
.toggle:hover {list-style-type:none;background-color:#E1E1E1;}
.hidden{display: block;padding:15px;margin-bottom:0px;margin-top:0px;border-bottom:1px solid #ccc;}

JavaScript

$('.hidden').hide();
$(window).load(function() {
    jQuery(document).ready(function() {
        jQuery(".toggle").next(".hidden").hide();
        jQuery(".toggle").click(function() {
            $('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
            $(this).toggleClass('active').next().slideToggle("fast");

        });
    });
    
    $(".close").click(function(){
       $(this).parents("li").slideUp("fast");     
    });
});