JSFiddle - React, Tailwind, and code Playground

by Gary Cline

HTML

<div class="trigger"><a href="#one">Collapsible Header 1</a>
</div>
<div class="panel">content 1</div>
<div class="trigger"><a href="#two">Collapsible Header 2</a>
</div>
<div class="panel">content 2</div>

CSS

body {
    margin:10px 0px;
    padding:0;
    width:500px;
    margin:auto;
    background:#ededed;
}
.trigger a{
    display:block;
    width:483px;
    background:#f4f4f4;
    background-image: -webkit-linear-gradient(white, #ededed);
    background-image: -moz-linear-gradient(white, #ededed);
    background-image: -o-linear-gradient(white, #ededed);
    background-image: -ms-linear-gradient(white, #ededed);
    background-image:linear-gradient(white, #ededed);
    color:#959696;
    padding-left:15px;
    height:40px;
    line-height:40px;
    text-decoration:none;
    border-bottom:thin solid #cecece;
    font-family:Arial;
    font-size:13px;
    font-weight:bold;
    text-shadow:0px 1px 1px white;
}
.panel {
    background:white;
    height:100px;
    line-height:100px;
    display:none;
    border-bottom:thin solid #cecece;
    padding-left:15px;
}
.first {
    border-top:thin solid #cecece;
}

JavaScript

$(document).ready(function () {
    $(".trigger").click(function () {
        $(this).next(".panel").slideToggle("medium");
    });
});