JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordionx">
    <div class="acitemx">
        <h3>First Panel</h3>
        <div class="accx">
            This is the content
        </div>
    </div>
    <div class="acitemx">
        <h3>Second Panel</h3>
        <div class="accx">
            This is the content
        </div>
    </div>
    <div class="acitemx">
        <h3>Third Panel</h3>
        <div class="accx">
            This is the content
        </div>
    </div>
</div>

CSS

/* accordion editing */
.accx {
    background: #FFF none repeat scroll 0% 0%;
    padding: 15px;
    display: none;
}
.acitemx {
    margin-bottom: 10px;
    box-shadow: 0px 0px 2px 0px rgb(189, 189, 189);
}
.acitemx h3 {
	cursor: pointer;
	background: #00ADEF none repeat scroll 0% 0% !important;
	color: #FFF !important;
	font-family: "roboto",sans-serif;
	font-weight: bold;
	padding: 8px 40px 8px 15px !important;
	position: relative;
	border-radius: 3px 3px 3px 3px;
}
/* end accordion editing */

JavaScript

$('.acitemx').eq(1).addClass('.acitemx').find('.accx').css('display','block');

$(".acitemx h3").click(function () {
    $header = $(this);
    $content = $header.next();
    $('.acitemx').removeClass('current');
    $('.accx').css('display','none');
    $content.slideToggle(500, function () {
      
    });
});