JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id = "main_header_window">	
</div>

<main>
	<aside id='aside-menu'>
		<ul>
			<li class="li_main_menu"><a href="#" class="a_main_menu">Text 1</a></li>
			<li class="li_main_menu"><a href="#" class="a_main_menu">Text 2</a></li>
			<li class="li_main_menu"><a href="#" class="a_main_menu">Text 3</a></li>
			<li class="li_main_menu"><a href="#" class="a_main_menu">Text 4</a></li>
		</ul>
	</aside>
	<div id="main_in_main_window">
		<div class="content_of_menu_in_main_menu one show" id="window_in_main1">Text 1</div>
		<div class="content_of_menu_in_main_menu two" id="window_in_main2">Text 2</div>
		<div class="content_of_menu_in_main_menu three" id="window_in_main3">Text 3</div>
		<div class="content_of_menu_in_main_menu four" id="window_in_main14">Text 4</div>
	</div>
</main>

<div id = "main_footer_window">	
</div>

CSS

.content_of_menu_in_main_menu {
	display: none;
}
.show {
	display: block;
}

JavaScript

let opAccord = {
	menu: document.getElementById('aside-menu'),
	content: document.getElementsByClassName('content_of_menu_in_main_menu'),
	events: {
		click: e => {
			if (e.target.classList.contains('a_main_menu')) {
				Array.from(opAccord.content, (el, ind) => ind === Array.from(document.getElementsByClassName(e.target.className)).indexOf(e.target) ?
				el.classList.add('show') : el.classList.remove('show'));
			}
		},
	},
}
opAccord.menu.addEventListener('click', opAccord.events.click);