JSFiddle - React, Tailwind, and code Playground

by Pragnesh Chauhan

HTML

<div id="box">

<div class="open">Show</div>
<div class="showpanel">This is content</div>


<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>

CSS

body{
font-size:20px;
}


#box{
    border:2px solid #000;
    width:500px;
    min-height:300px;
    
}
.open,.open2 {
    width:450px;
    height:50px;
    background:blue;
    margin:5px auto 0 auto;
    color:#fff;
    

    
    }
.showpanel,.showpanel2{
    width:450px;
    height:300px;
    margin:0 auto 10px auto;
    background:red;
    display:none;

}

JavaScript

$(document).ready(function(){
    $('.open').toggle(function(){    
            $('.showpanel').slideToggle('slow');
            $(this).text('close');
    }, function(){
        $('.showpanel').slideToggle('slow');
        $(this).text('Show');
    });
    
        $('.open2').toggle(function(){
    
            $('.showpanel2').slideToggle('slow');
            $(this).text('close');
        }, function(){
            $('.showpanel2').slideToggle('slow');
            $(this).text('Show');
        });   
});