JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div class="accordion">
    <div class="accordion-head">
        <span class="updown"></span><h4>Question goes here</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">
        	<span class="updown"></span><h4>Another question here</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">
        	<span class="updown"></span><h4>Another question here</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">
        	<span class="updown"></span><h4>Another question here</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 span {
    width:50px;
    height:50px;  
    float:right;
    background-image: url('http://i60.tinypic.com/jjo5fl.png');    
}
.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;
}

.accordion-body:first-of-type {display: block;}

JavaScript

//Accordian
	$('.accordion').each(function () {
	    var $accordian = $(this);
	    $accordian.find('.accordion-head').on('click', function () {
	        $accordian.find('.accordion-body').slideUp();
            $accordian.find('span').css("backgroundPosition",'0px 0px');
	        if (!$(this).next().is(':visible')) {
	            $(this).next().slideDown();
                $(this).find('span').css({"background-position" : '50px 0px'});
            }
	    });
        jQuery('.accordion-head:first-child').trigger('click');
	});