JSFiddle - React, Tailwind, and code Playground

by Prakash Upadhyay

HTML

<div class="accordion">
     <h3>Section 1</h3>

    <div class="pane">
        <p>Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a....</p>
    </div>
    <h3>my section 2</h3>

    <div class="pane">
        <p>Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a. Mauris mauris ante, blandit et, ultrices a....</p>
    </div>
     <h3>Section 3</h3>

    <div class="pane">
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Sed non urna. Donec et ante. Phasellus eu ligula. Sed non urna. Donec et ante. Phasellus eu ligula....</p>
    </div>
     <h3>Section 4</h3>

    <div class="pane">
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
</div>

CSS

.accordion {
    margin:1em 0
}
.accordion h3 {
    background:#559b6a;
    color:#fff;
    cursor:pointer;
    margin:0 0 1px 0;
    padding:4px 10px
}
.accordion h3.current {
    background:#4289aa;
    cursor:default
}
.accordion div.pane {
    padding:5px 10px;
    display:none;
}

JavaScript

$(function () {
    //  Accordion Panels
   $(".accordion div").hide();
    setTimeout("$('.accordion h3:first').click();", 100);
    $(".accordion h3").click(function () {
        $(this).next(".pane").slideToggle().siblings(".pane:visible").slideUp();
        $(this).toggleClass("current");
        $(this).siblings("h3").removeClass("current");
    });
});