JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<body>
    <div id="accordionsection">
        <div class="accordionBox">
             <h1>Printers</h1>

            <div class="accordionBoxContent">Content 1</div>
        </div>
        <div class="accordionBox">
             <h1>Printers</h1>

            <div class="accordionBoxContent">Content 1</div>
        </div>
        <div class="accordionBox">
             <h1>Printers</h1>

            <div class="accordionBoxContent">Content 1</div>
        </div>
        <div class="accordionBox last">
             <h1>Printers</h1>

            <div class="accordionBoxContent">Content 1</div>
        </div>
    </div>
</body>

CSS

#accordion {
}
.accordionBox {
    background: #f7f7f7;
    border: 1px solid #ccc;
    border-left: 5px solid #ccc;
    cursor: pointer;
    outline: none;
    padding: 0px 0px 10px 0px;
    margin: 10px 0px 10px 0px;
}
div.accordionBox.last {
    border-bottom: 1px solid #ccc;
}
.accordionBox h1 {
    font-family:"Dosis", "Gudea", sans-serif;
    text-rendering: optimizelegibility;
    color: #666768;
    font-weight: normal;
    margin: 10px 0px 0px 20px;
    padding: 0px;
}
.accordionBox h1:after {
    color:#484848;
    font-size:32px;
    content:"\2B";
    float: right;
    margin-right: 20px;
}
.accordionBox h1:after {
    color:#666768;
}
.accordionBoxContent {
    background: #f7f7f7;
    padding: 0px 0px 20px 20px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border-top: 5px solid #fd7800;
    padding: 10px 0px 0px 0px;
    margin: 0px 20px 0px 20px;
    display:none;
}
/*** EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS ***/
 .open {
    border-left-color: #fd7800;
}
.open h1:after {
    content:"\2D";
    color: #fd7800;
}
.over {
    border-left-color: #fd7800;
}
.over h1:after {
    color: #fd7800;
}

JavaScript

$(document).ready(function () {
    //if($('#accordionsection').children('div.accordionBox').hasClass('open')){
    //    $('.open .accordionBoxContent').show();
    //  }

    $('.accordionBox').click(function () {
        //if this is active
        if ($(this).hasClass('open')) {
            $('.open').children('.accordionBoxContent').hide('blind');
            $('.open').removeClass('open');
        } else {
            $('.open').children('.accordionBoxContent').hide('blind');
            $('.open').removeClass('open');
            $(this).children('.accordionBoxContent').show('blind');
            $(this).addClass('open');
        }

    });

});