I have a website in Wordpress and I'm having difficulties in the following function, I created a small script, which when clicking a button, it should replace one div with another, to exchange content without reloading the page, so far so good, worked correctly, but the big problem is that I have many buttons and lots of content for and they need to be in the same place, for example: I have 3 buttons, each one of them has its respective list. Within each list, there will be several items that will have their respective contents. Let's say that the client clicks the first button, the list appears and it clicks on one of the items in the list, the content appears. Click the second button, change the list and it clicks on one of the items, the content changes.
I'm a little bit lazy in Js, and I'm having a hard time making this transition without having to reload the page, thanks in advance for the help!
Ex menu image:
Thetopbuttons(cardiac,abdominal,facial)areoneofthemenus,allmadeinbuttons,clickingoneachoneofthem,thecontainerthatgoesbelowwouldbereplacedbytheirrespectiveone.Asyoucanseeontheside,thereisanothermenu(LCDReplenishment,TouchReposition,Assembly),clickingoneachitemofthiscontentontherightsidewouldhavetochange.
I'llleavethecodeItriedtorun,it'satestcode.Thanksinadvanceforyourhelp!
$( 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><divid="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>