JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
    <div class="accordion-head">
        	<h4>Section A</h4>

    </div>
    <div class="accordion-body">
        <p>Lorem Ipsum is sfnti nting and typesetting industry dummy text o g and typesetting industry.</p>
    </div>
    <div class="accordion-head">
        	<h4>Section B</h4>

    </div>
    <div class="accordion-body">
        <p>Lorem Ipsum is sfnti nting and typesetting industry dummy text o g and typesetting industry.</p>
    </div>
</div>

CSS

/*Accordian*/
 .accordion {
    width: 100%;
    background-color: #EDEDED;
}
.accordion .accordion-head {
    color: #fff;
    background-color: #3A84DE;
    border-bottom: 1px solid #fff;
    position: relative;
    padding: 13px;
    font-size: 0.87em;
    cursor: pointer;
}
.accordion .accordion-head * {
    cursor: pointer;
}
.accordion .accordion-head:hover {
    filter: alpha(opacity=80);
    opacity: 0.80;
}
.accordion .accordion-body {
    border-bottom: 1px solid #fff;
    padding: 20px;
    height: auto;
    display: none;
}

JavaScript

//Accordian
	$('.accordion').each(function () {
	    var $accordian = $(this);
	    $accordian.find('.accordion-head').on('click', function () {
	        $accordian.find('.accordion-body').slideUp();
	        if (!$(this).next().is(':visible')) {
	            $(this).next().slideDown();
	        }
	    });
	});