JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<ul class="menu">
  <li class="menu-item" id="menu_1">Menu 1</li>
  <li class="menu-item" id="menu_2">Menu 2</li>
  <li class="menu-item" id="menu_3">Menu 3</li>
</ul>
<section class="section section-show" id="section_1">Contenu 1</section>
<section class="section" id="section_2">Contenu 2</section>
<section class="section" id="section_3">Contenu 3</section>

CSS

.section {
  display: none;
}

.section-show {
  display: block;
}

JavaScript

var menu = document.getElementsByClassName('menu-item');

for	(let i=0; i<menu.length; i++) {
  menu[i].addEventListener('click', function() {
    showContent(i+1);
  });
}

function showContent(item) {
  document.getElementsByClassName('section-show')[0].classList.remove('section-show');
	document.getElementById('section_'+item).classList.add('section-show');
}