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() {
    if ($(this).parent().hasClass('towns_open')) {
        $(this).parent().removeClass('towns_open');
        $(this).siblings('.scoreboard').slideUp(400);
    } else {
        $(this).parent().addClass('towns_open').siblings().removeClass('towns_open');
        $(this).parent().siblings().find('.scoreboard').slideUp(400);
        $(this).siblings('.scoreboard').slideDown(400);
    }
});