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

var kinTooltip = function(js_content) {
    var title = $('.js_title'),
    content = js_content;

    content.on('click', '.js_title', function() {
        if ($(this).parent().hasClass('towns_open')) {
            close();
        } else {
            open($(this));
        }
    });
    function open(e) {
        close();
        e.next().slideDown(200);
        e.parent().addClass('towns_open');
    }
    function close() {
        title.each(function(){
            $(this).parent().removeClass('towns_open');
            $(this).next().slideUp(200);
        });
    }
};
kinTooltip($('#js_content'));