JSFiddle - React, Tailwind, and code Playground

by Naveen Kumar

HTML

<div class="accordion-container">
	<a href="#" class="accordion-toggle">Heading 1</a>
	<div class="accordion-content">
		Content 1
	</div>
</div>
<div class="accordion-container">
	<a href="#" class="accordion-toggle">Heading 2</a>
	<div class="accordion-content">
		Content 2
	</div>
</div>
<div class="accordion-container">
	<a href="#" class="accordion-toggle">Heading 3</a>
	<div class="accordion-content">
		Content 3
	</div>
</div>

CSS

.accordion-container {
	margin: 0 0 10px;
}
.accordion-toggle {
	position: relative;
	display: block;
	padding: 10px;
	font-size: 1.5em;
	font-weight: 300;
	background: #999;
	color: #fff;
	text-decoration: none;
}
.accordion-toggle.open,.accordion-toggle:hover {
	background: #333;
}
.accordion-toggle span.toggle-icon {
	position: absolute;
	top: 9px;
	right: 20px;
	font-size: 1.5em;
}
.accordion-content {
	display: none;
	padding: 20px;
	overflow: auto;
}

JavaScript

$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.next('.accordion-content');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("open");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
    	
    });
});