JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="accordion">
<h2 class="acc_trigger"><a href="#">Div 1</a></h2>
<div class="acc_container">
<div class="block"> Yay content!</div>
</div>

CSS

h2.acc_trigger {
    padding: 0;
    margin: 0 0 5px 0;
    height: 46px;
    line-height: 46px;
    width: 590px;
    font-size: 1.5em;
    font-weight: normal;
    float: left;
    margin-bottom:0;
}
h2.acc_trigger a {
    color: #222;
    text-decoration: none;
    display: block;
    padding: 0 0 0 50px;
}
h2.acc_trigger.active a {
    color: #FF0000;
}
h2.acc_trigger a:hover {
    color: #999;
}
h2.acc_trigger a:active, h2.active {
    color:#ED2224;
}
h2.active {
    background-position: left bottom;
}
.acc_container {
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 590px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top:none;
}
.acc_container .block {
    padding: 20px;
}

JavaScript

$(document).ready(function () {
    var divs=$('.accordion>div').hide(); //Hide/close all containers

    var h2s=$('.accordion>h2').click(function () {
        $(this).toggleClass('active')
        $(this).next().slideToggle()
        return false; //Prevent the browser jump to the link anchor
    });
});