JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<body>
    <div id="accordionsection">
        <div class="accordionBox open">
             <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 () {


    function accordionClick() {
        var $this = $(this);
        if ($('.accordionBoxContent').is(':animated')) {
            return;
        }

        if ($this.hasClass('open')) {
            $this.find('.accordionBoxContent').toggle({
                effect: 'blind',
                duration: 300,
                complete: function () {
                    $this.removeClass('open');
                }
            });
        } else {
            $('.open').find('.accordionBoxContent').toggle({
                effect: 'blind',
                duration: 300,
            });
            $this.addClass('open').siblings().removeClass('open');
            $this.find('.accordionBoxContent').toggle({
                effect: 'blind',
                duration: 300,
            });
        }
    }

    $('.accordionBox').on('click', accordionClick);

    if ($('.open').length > 0) {
        $('.accordionBox.open').children().show();
    }




});