JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p></div>
</div>

CSS

.accordion {
	margin: 0;
	padding: 10px;
	height: 20px;
	border-top: #f0f0f0 1px solid;
	background: #cccccc;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	color: #000;
	font-size: 1em;
}
.accordion span {
	background: #000;
	color: #fff;
}
.show span {
	display: block;
	float: right;
	padding: 10px;
}
.accordion span {
	display: block;
	float: right;
	background: url(http://www.snyderplace.com/demos/images/plus.png) center center no-repeat;
	padding: 10px;
}
.show span {
	background: url(http://www.snyderplace.com/demos/images/minus.png) center center no-repeat;
}
div.container {
	padding: 0;
	margin: 0;
	display: none;
}
div.content {
	background: #f0f0f0;
	margin: 0;
	padding: 10px;
	font-size: .9em;
	line-height: 1.5em;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
div.content ul, div.content p {
	margin: 0;
	padding: 3px;
}
div.content ul li {
	list-style-position: inside;
	line-height: 25px;
}
div.content ul li a {
	color: #555555;
}
div.show + .container {
	display: block;
}

JavaScript

var accordions=null;
var containers=null;
var slideDuration=400;
var scrollDuration=400;
var body=null;
var classNameShow='show';
var classNameAccordion='.accordion';
var classNameContainer='.container';
var dataOffsetTop='offsetTop';
$(document).ready(function(){
	body=$('html, body');
	accordions=$(classNameAccordion);
	containers=$(classNameContainer);
	accordions.each(function(){
		var openedAccordions=accordions.filter(function(){return $(this).hasClass(classNameShow);});
		openedAccordions.removeClass(classNameShow);
		$(this).data(dataOffsetTop,$(this).offset().top);
		openedAccordions.next(classNameContainer).stop(true).slideDown({
			duration:slideDuration,
			complete:function(){openedAccordions.addClass(classNameShow);}
		});
	});
	accordions.click(function(){
		var currentAccordion=$(this);
		var currentContainer=$(this).next(classNameContainer);
		var openedAccordions=accordions.filter(function(){return $(this).hasClass(classNameShow);});
		if(!currentAccordion.hasClass(classNameShow)){
			currentContainer.stop(true).slideDown({
				duration:slideDuration,
				complete:function(){currentAccordion.addClass(classNameShow);}
			});
			body.stop(true).animate({scrollTop:currentAccordion.data(dataOffsetTop)},scrollDuration);
		}else{
			currentContainer.stop(true).slideUp({
				duration:slideDuration,
				complete:function(){currentAccordion.removeClass(classNameShow);}
			});
		}
		containers.not(currentContainer).stop(true).slideUp({
			duration:slideDuration,
			complete:function(){openedAccordions.removeClass(classNameShow);}
		});
	});
});