JSFiddle - React, Tailwind, and code Playground

by Harsh Bhatnagar

HTML

<body>
    <div class="accordion">
    <div class="accord-header">Header 1</div>
    <div class="accord-content">This is the content for the first header.</div>
    <div class="accord-header">Header 2</div>
    <div class="accord-content">this is from second accordion.</div>
    <div class="accord-header">Header 3</div>
    <div class="accord-content">This is the content for the third header.</div>
    </div>

</body>

CSS

.accord-content { display: none;
padding:10px;}
.accord-header{
  padding:10px;
  background:#ccc;
}

JavaScript

$(document).ready(function() {
    $(".accordion .accord-header").click(function() {
        if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
        } else {
            $(".accordion .accord-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
        }
    });
    $(".accordion .accord-header:eq(2)").trigger('click');
});