JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, sapiente dignissimos libero, ullam maiores suscipit nesciunt, similique nam, iusto quo voluptates inventore eos eius expedita obcaecati odit ex quisquam. Doloribus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi itaque veritatis quae. Aspernatur eligendi ipsum saepe error, delectus possimus asperiores temporibus laudantium non? Vel porro deleniti temporibus ullam, veniam quas.</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, sapiente dignissimos libero, ullam maiores suscipit nesciunt, similique nam, iusto quo voluptates inventore eos eius expedita obcaecati odit ex quisquam. Doloribus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi itaque veritatis quae. Aspernatur eligendi ipsum saepe error, delectus possimus asperiores temporibus laudantium non? Vel porro deleniti temporibus ullam, veniam quas.</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, sapiente dignissimos libero, ullam maiores suscipit nesciunt, similique nam, iusto quo voluptates inventore eos eius expedita obcaecati odit ex quisquam. Doloribus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi itaque veritatis quae. Aspernatur eligendi ipsum saepe error, delectus possimus asperiores temporibus laudantium non? Vel porro deleniti temporibus ullam, veniam quas.</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Lorem ipsum dolor sit amet,...

CSS

footer {height: 50vh; background: black;}
.accordion {
	margin: 0;
	padding: 10px;
	
	border-top: #f0f0f0 1px solid;
	background: #cccccc;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	color: #000;
	font-size: 1em;
}

div.container {
	padding: 0;
	margin: 0;
	display: none;
}

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);}
		});
	});
});