JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div id="js_content">
	<div class="towns">
		<h4 class="towns__title js_title">Город1</h4>
		<div class="scoreboard" style="display:none;">
			<table class="scoreboard__table">
			    <tr><th>Контент отображаемой таблицы1</th></tr>
			</table>
		</div>
	</div>
	<div class="towns">
		<h4 class="towns__title js_title">Город2</h4>
		<div class="scoreboard" style="display:none;">
			<table class="scoreboard__table">
                <tr><th>Контент отображаемой таблицы2</th></tr>
			</table>
		</div>
	</div>
	<div class="towns">
		<h4 class="towns__title js_title">Город3</h4>
		<div class="scoreboard" style="display:none;">
			<table class="scoreboard__table">
                <tr><th>Контент отображаемой таблицы3</th></tr>
			</table>
		</div>
	</div>
</div>

JavaScript

$('#js_content').on('click', '.js_title', function() {
    $(this).parent().toggleClass('towns_open');
    $(this).siblings('.scoreboard').slideToggle(200);
});