JSFiddle - React, Tailwind, and code Playground

by Ryan Stemkoski

HTML

<div id="ss_menu">
	<div class="ss_button">Button 1</div>
	<div class="ss_content">Content<br /><br /><br />More Content<br /></div>
	<div class="ss_button">Button 2</div>
	<div class="ss_content">Content<br /><br /><br />More Content<br /></div>
	<div class="ss_button">Button 3</div>
	<div class="ss_content">Content<br /><br /><br />More Content<br /></div>
	<div class="ss_button">Button 4</div>
	<div class="ss_content">Content<br /><br /><br />More Content<br /></div>
	<div class="ss_button">Button 5</div>
	<div class="ss_content">Content<br /><br /><br />More Content<br /></div>
	<div class="ss_button">Button 6</div>
    <div class="ss_content">Content<br /><br /><br />More Content<br /></div>
</div>

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
}

#ss_menu { 
	width: 500px; 
	}

.ss_button { 
	background-color: #F60;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	padding: 10px;
	color: #FFFFFF;
	}
	
.ss_content {
	background-color: #EFEFEF;
	display: none;
	padding: 10px;
	}

JavaScript

jQuery(function() {
	jQuery('.ss_button').on('click',function() {
		jQuery('.ss_content').slideUp('fast');
		jQuery(this).next('.ss_content').slideDown('fast');
	});
});