JSFiddle - React, Tailwind, and code Playground

by Nandhakumar Udayasuryan

HTML

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

    </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 class="arrow down"></div>

    </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;
    overflow: hidden;
}
.accordion .accordion-head * {
    cursor: pointer;
}
.accordion .accordion-head h4 {
    float: left;
}
.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;
}
.arrow {
    float: right;
    width: 0px;
    height: 0px;
    margin-top: 23px;
    border: 10px solid transparent;
    margin-top: 21px;
    border-top-color: #F3F3F3;
}
.accordion-head.open .arrow {
    margin-top: 11px;
    border-bottom-color: #F3F3F3;
    border-top-color: transparent;
}

JavaScript

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