JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="accordion">
	<article class="ac-item">
		<div class="ac-title">
			This is the title
		</div>	
		<div class="ac-content">
			This is the content
		</div>
	</article>
	<article class="ac-item">
		<div class="ac-title">
			This is the title
		</div>	
		<div class="ac-content">
			This is the content
		</div>
	</article>
</div>

CSS

html, body {
margin: 0;
background: #999;
}
#accordion {
margin: 0 auto;
width: 800px;
height: 500px;
border: 1px solid #000;
}
.ac-item {
margin: 0 auto;
margin: 50px;
border: 1px solid #000;
}
.ac-title {
font-weight: normal;
font-size: 30px;
}
.ac-content {
     display: none;   
}    
}

JavaScript

$(document).ready(function(){
	$('.ac-title').click(function(){
		$(this).next(".ac-content").slideToggle();
	});
});