JSFiddle - React, Tailwind, and code Playground

by David Gonzalez

HTML

<div class="container">

    <div >
        <ul>
            <li class="header">This is just header.</li>
            <li class="content">This is just some random content.</li>
            <li class="content">This is just some random content.</li>
            <li class="content">This is just some random content.</li>
        </ul>
    </div>
</div>

CSS

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}

.container .content {
    padding : 5px;
}

ul li{
  display: none;
}

ul .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
    display: block;
}

JavaScript

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

    $header = $(this);
    //getting the next element
    $content = $header.parent();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.find("li").slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        
    });

});

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

    $header = $(this);
    //getting the next element
    $content = $header.parent();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.find("li").slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        
    });
});