JSFiddle - React, Tailwind, and code Playground

by Alexander Tartmin

HTML

<div class="content-accordion">
    <div class="accordion-block">
        <div class="accordion-title">
             <h3>What is the payout for the options traded?</h3>

        </div>
        <div class="accordion-content">
            <p>You can open call and put options on the same asset during the same trading hour. Traders should be aware of our Terms &amp; Conditions with reference to certain restrictions on trades.</p>
        </div>
    </div>
    <div class="accordion-block">
        <div class="accordion-title">
             <h3>What is the payout for the options traded?</h3>

        </div>
        <div class="accordion-content">
            <p>You can open call and put options on the same asset during the same trading hour. Traders should be aware of our Terms &amp; Conditions with reference to certain restrictions on trades.</p>
        </div>
    </div>
</div>

CSS

.accordion-block {
    width: 100%;
    background: #3a3d45;
    border-radius: 4px;
    margin-bottom: 24px;
}
.accordion-block .accordion-title {
    background: #747586;
    border-radius: 4px;
    padding: 10px 0;
    cursor: pointer;
}
.accordion-block.slide-down .accordion-title {
    border-radius: 4px 4px 0 0;
}
.accordion-block .accordion-title h3 {
    margin: 0;
    font-size: 16px;
    padding-left: 12px;
    font-weight: bold;
}
.accordion-block .accordion-title h3:before {
    content:"";
    display: block;
    width: 18px;
    height: 18px;
    background: url(../img/accordion-title.png) no-repeat 0 0;
    float: left;
    margin-right: 10px;
}
.accordion-block.slide-down .accordion-title h3:before {
    background: url(../img/accordion-title.png) no-repeat 0 -18px;
}
.accordion-block .accordion-content {
    border-radius: 4px 4px 0 0;
    padding: 10px 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #464a54;
    border-bottom-color: #464a54;
    border-left-color: #464a54;
    border-radius: 0 0 4px 4px;
    padding: 20px;
    font-size: 14px;
    color: #aaaaaa;
    display: none;
}
.content .accordion-block .accordion-content p {
    margin: 0 0 20px;
}

JavaScript

$(document).ready(function () {
    $('.accordion-title').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $(this).parent('.accordion-block').find('.accordion-content').slideUp();
            $(this).parent('.accordion-block').removeClass('slide-down');
        } else {
            $(this).parent('.accordion-block').find('.accordion-content').slideDown();
            $(this).parent('.accordion-block').addClass('slide-down');
        }
        $(this).data("clicks", !clicks);
    });
});