Cara buat simple collapse

Assalamu'alaikum wr wb,
kali ini saya akan share Cara buat simple collapse,
berikut ini syntaxnya.

<style type="text/css">
.container
{
    width:100%;
    border:1px solid #d3d3d3;
}

.container div
{
    width:100%;
}

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

.container .content
{
    display: none;
}
</style>

<div class="container">
    <div class="header"><span>Expand</span>
    </div>
    <div class="content">
        <ul>
            <li>Hanya sekedar text acak di konten.</li>
            <li>Hanya sekedar text acak di konten.</li>
            <li>Hanya sekedar text acak di konten.</li>
            <li>Hanya sekedar text acak di konten.</li>
        </ul>
    </div>
</div>


<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>


<script type="text/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";
        });
    });

});
</script>

Semoga bermanfaat.
https://pangeran-it.blogspot.co.id