JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<ul>
<li><div class="accordionButton"><span><span class="circle">1</span><strong>Check Eligibility Requirements </strong></span><span class="plusMinus">+</span></div>
<div class="accordionContent"><p>All DASCA certifications mandate you to meet certain educational and work experience requirements to become eligible. The requirements for each DASCA certification is unique, so before proceeding, <a href="/data-science-certifications/choose-dasca-credential">check</a> if you satisfy the minimum eligibility requirements for the <b>SDS™ Certification</b>, you wish to apply for.</p>
<p>It is recommended that you keep this information handy as it will be required while filling up your online application.</p></div></li>
<li><div class="accordionButton"><span><span class="circle">2</span><strong>Fill Online Application</strong></span><span class="plusMinus">+</span></div>
<div class="accordionContent"><p>Once you have satisfied the SDS™ eligibility requirements, it is time to apply. Start the application process by creating your <b><a href="/apply-for-DASCA-certifications/apply-now/SDS" rel="nofollow" title="Click here">myDASCA</a></b> account. Before proceeding, check if you <b><a href="/qualifly" title="QualiFly"> QualiFly™</a></b>
for SDS™. QualiFLY™ essentially relaxes the minimum eligibility requirements and provides upto 15% lower SDS™ fees, based on your education and work experience. Complete the SDS™ online application form. Once you have submitted the online application and made a successful payment of the fee, you will immediately receive an acknowledgement response email with instructions for the next step in the assessment process.</p></div></li>
<li><div class="accordionButton"><span><span class="circle">3</span><strong>Validation</strong></span><span class="plusMinus">+</span></div>
<div class="accordionContent"><p>An internal check is conducted to validate your credentials against the prescribed candidacy prerequisites for earning the <b>SDS™...

CSS

li {
    margin-bottom: 4px;
    position: relative;
    list-style:none;
}
.accordionButton {
    background: rgb(202, 218, 217) none repeat scroll 0 0;
    color: rgb(122, 122, 122);
    cursor: pointer;
    font-size: 14px;
    padding: 10px;
}
.circle {
    background: rgb(181, 197, 196) none repeat scroll 0 0;
    color: rgb(41, 87, 164);
    padding: 4px 10px;
    position: relative;
    text-align: center;
    z-index: 10;
    border-radius: 100%;
    margin-right:10px;
}
.accordionButton .plusMinus {
    content: "+";
    float: right;
    font-size: 15px;
    padding-right: 29px;
    padding-top: 0;
}
.accordionContent p {
    padding-left: 50px;
    font-size: 14px;
    padding-top: 10px;
}

JavaScript

jQuery(document).ready(function() {
    jQuery('.accordionButton').click(function() {
        jQuery('.accordionButton').removeClass('on');
        jQuery('.accordionContent').slideUp('normal');
        jQuery('.plusMinus').text('+');
        if ($(this).next().is(':hidden') == true) {
            $(this).addClass('on');
            jQuery(this).next().slideDown('normal');
            jQuery(this).children('.plusMinus').text('-');
        }
    });
    jQuery('.accordionButton').mouseover(function() {
        jQuery(this).addClass('over');
    }).mouseout(function() {
        jQuery(this).removeClass('over');
    });
    jQuery('.accordionContent').hide();
});