JSFiddle - React, Tailwind, and code Playground

by Halcyon

HTML

<div>
	<div id="text1" class="text">Text 1</div>
	<div id="text2" class="text">Text 2</div>
	<div id="text3" class="text">Text 3</div>
	<br />
	<br />
	<button id="button1" type="button">Button 1</button>
	<button id="button2" type="button">Button 2</button>
	<button id="button3" type="button">Button 3</button>
</div>

CSS

.text { background-color: lightgray; display: none; }

JavaScript

$(document).ready(function () {
	$('#button1').click(function () {
		if ($('#text1').is(':visible')) {
			$('#text1').slideUp(200);
		} else {
			if ($('#text2').is(':visible')) {
				$('#text2').slideUp(200, function () {
					$('#text1').slideDown(200);
				});
			} else if ($('#text3').is(':visible')) {
				$('#text3').slideUp(200, function () {
					$('#text1').slideDown(200);
				});
			} else {
				$('#text1').slideDown(200);
			}
		}
	});

	$('#button2').click(function () {
		if ($('#text2').is(':visible')) {
			$('#text2').slideUp(200);
		} else {
			if ($('#text1').is(':visible')) {
				$('#text1').slideUp(200, function () {
					$('#text2').slideDown(200);
				});
			} else if ($('#text3').is(':visible')) {
				$('#text3').slideUp(200, function () {
					$('#text2').slideDown(200);
				});
			} else {
				$('#text2').slideDown(200);
			}
		}
	});

	$('#button3').click(function () {
		if ($('#text3').is(':visible')) {
			$('#text3').slideUp(200);
		} else {
			if ($('#text1').is(':visible')) {
				$('#text1').slideUp(200, function () {
					$('#text3').slideDown(200);
				});
			} else if ($('#text2').is(':visible')) {
				$('#text2').slideUp(200, function () {
					$('#text3').slideDown(200);
				});
			} else {
				$('#text3').slideDown(200);
			}
		}
	});
});