JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<div>
        <div id="accordion">
            <h2>+ Section 1</h2>
            <div class="pane">
                <p>Content</p>
            </div>
            <h2>+ Section 2</h2>
            <div class="pane">
                <p>Content</p>
            </div>
            <h2>+ Section 3</h2>
            <div class="pane">
                <p>Content</p>
            </div>
            <h2>+ Section 4</h2>
            <div class="pane">
                <p>Content</p>
            </div>
        </div>
        </div>

CSS

#accordion {
    width: 100%;
    border:0 solid #333;    
}

#accordion h2 {
    background:#ccc;
    margin:0;
    padding:5px 15px;
    font-size:14px;
    font-weight: bold;
    border:1px solid #fff;
    border-bottom:1px solid #ddd;
    cursor:pointer;    
    color: rgb(0,0,0);
}

#accordion h2:hover {
    background-color: rgb(220,220,220);
}

#accordion .pane {
    border:1px solid rgb(255,255,255);
    border-width:0 2px;
    display:none;
    height:200px;
    padding:15px;
    color:rgb(102,102,102);
    font-size:12px;
}

#accordion .pane:current {
    display:block;
}

#accordion .pane h3 {
    font-weight:normal;
    margin:0 0 -5px 0;
    font-size:16px;
    color:#999;
}

JavaScript

$(function() {

    $("#accordion").accordion({
        collapsible: true
    });

});