Doubt Js code for div exchange

Question

I have a site in Wordpress and I’m having difficulties in the following function, I created a small script, that when clicking a button, it should replace a div for another, to exchange content without reloading the page, until then okay, it worked correctly, but the big problem is that I have lots of buttons and lots of content to display and they need to be in the same place, for example: I have three buttons, each one has its own list. Within each list, there will be several items that will have their respective contents. Say the customer clicks on the first button, the list appears and he clicks on one of the items in the list, the content appears. Click the second button, swap the list and it clicks on one of the items, the content changes.

I’m a little layman in Js, and I’m having a hard time making this transition without having to reload the page, I appreciate the help!

Ex menu image:

The top buttons (cardiacas, abs, facials) is one of the menus, all made on buttons, clicking on each of them, the container that goes below would be replaced by its respective. As you can see on the side, there is another menu (LCD Replacement, Touch Replacement, Mounting), clicking on each item of that the content on the right side would have to change.

I’ll let the code I tried to execute, it’s a test code. Thanks for your help!

$( document ).ready(function() {
document.getElementById('botaocardiacas').onclick = function(){         document.getElementById('menu-cardiacas').innerHTML = document.getElementById('menu-abdominais').innerHTML; } });
$( document ).ready(function() {
document.getElementById('clique3').onclick = function(){         document.getElementById('conteudo').innerHTML = document.getElementById('conteudo2').innerHTML; } });

#teste, #clique1, #clique2 {
  width:100px;
  height:50px;
}

#botaocardiacas, #botaoabdominais, #botaofaciais {
  width:100px;
  height:50px;
  margin-bottom:20px;
  display:inline-block;
  float:left;
}

#menu-cardiacas, #menu-abdominais {
  display:block;
  margin-top:50px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cardiacas">
<button type="button" id="botaocardiacas">cardiacas</button>
</div>

<div id="abdominais">
<button type="button" id="botaoabdominais">abdominais</button>
</div>

<div id="faciais">
<button type="button" id="botaofaciais">faciais</button>
</div>

<div id="menu-cardiacas" class="card">
<div class="teste">
<button type="button" id="clique1">reposição</button>
<button type="button" id="clique2">reposição touch</button>
</div>
</div>

<div id="menu-abdominais" style="visibility:hidden;">
<div class="teste">
<button type="button" id="clique3">botao</button>
<button type="button" id="clique4">reposição botao</button>
</div>
</div>

<div id="menu-faciais" style="visibility:hidden;">
<div class="teste">
<button type="button" id="clique5">tela</button>
<button type="button" id="clique6">reposição tela</button>
</div>
</div>

<div id="conteudo">
teste, teste
</div>

<div id="conteudo2" style="visibility:hidden;">
teste, teste, teste
</div>

Answer 1

You could do this by simply placing the two Ivs, one of them with display: None, in the same place and each time you click from a display: block on one and display: None on the other with js, you can create css classes for this too.