JSFiddle - React, Tailwind, and code Playground

Expand Collapse Panels

by Karmik Patel

HTML

<div class='container'>#Name#<div class='header'> ▼ Expand</div><div class='content'>

</div></div>
    
<br/>
    
<div class='container'>   
Second Two
    <div class='header'> ▼ Expand</div>
    <div class='content'>
        
    </div>
</div>

CSS

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 5px 0px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

</style>
<meta name="charset" content="UTF-8" />
<style>

JavaScript

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "▲ Collapse" : "▼ Expand";
        });
    });

});