JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span onclick="AffichePartie(0)">affichePartie1</span>
  <span onclick="AffichePartie(1)">affichePartie2</span>
  <span onclick="AffichePartie(2)">affichePartie3</span>
  <span onclick="AffichePartie(3)">affichePartie4</span>
  <span onclick="AffichePartie(4)">affichePartie5</span>
</div> 
<div class="parent" id="Partie1">

	<div class="element"> 1-1 </div>
	<div class="element"> 1-2 </div>
	<div class="element"> 1-3 </div>
	<div class="element"> 1-4 </div>

</div>

<div class="parent" id="Partie2">

	<div class="element"> 2-1 </div>
	<div class="element"> 2-2 </div>
	<div class="element"> 2-3 </div>
	<div class="element"> 2-4 </div>

</div>

<div class="parent" id="Partie3">

	<div class="element"> 3-1 </div>
	<div class="element"> 3-2 </div>
	<div class="element"> 3-3 </div>
	<div class="element"> 3-4 </div>

</div>

<div class="parent" id="Partie4">

	<div class="element"> 4-1 </div>
	<div class="element"> 4-2 </div>
	<div class="element"> 4-3 </div>
	<div class="element"> 4-4 </div>

</div>

<div class="parent" id="Partie5">

	<div class="element"> 5-1 </div>
	<div class="element"> 5-2 </div>
	<div class="element"> 5-3 </div>
	<div class="element"> 5-4 </div>

</div>

CSS

.invisible
{
  display:none;
}

JavaScript

function CacheTout(){
  for(var i=0;i<document.getElementsByClassName("parent").length;i++)
  {
  document.getElementsByClassName("parent")[i].classList.add("invisible");
  }
}

function AffichePartie(numero)
{
	CacheTout();
  document.getElementsByClassName("parent")[numero].classList.remove("invisible");
}

CacheTout();