Tenho um site em Wordpress e estou tento dificuldades na seguinte função, eu criei um pequeno script, que ao clicar em um botão, ele deve substituir uma div por outra, para trocar conteúdo sem recarregar a página, até então tudo bem, funcionou corretamente, mas o grande problema é que tenho muitos botões e muitos conteúdos para exibir e eles precisam estar no mesmo lugar, por exemplo: Tenho 3 botões, cada um deles tem a sua respectiva lista. Dentro de cada lista, vão haver diversos itens que terão seus respectivos conteúdos. Digamos que o cliente clica no primeiro botão, a lista aparece e ele clica em um dos itens da lista, o conteúdo aparece. Clica no segundo botão, troca a lista e ele clica em um dos itens, o conteúdo muda.
Sou um pouco leigo em Js, e estou tendo dificuldades de fazer essa transição sem ter que recarregar a página, desde já agradeço a ajuda!
Os botões de cima (cardiacas, abdominais, faciais) é um dos menus, todos feitos em botões, clicando em cada um deles, o container que vai abaixo seria substituído pelo seu respectivo. Como podem ver ao lado, existe outro menu (Reposição LCD, Reposição Touch, Montagem), clicando em cada item desse o conteúdo ao lado direito teria que mudar.
Vou deixar o código que eu tentei executar, é um código de testes. Desde já agradeço a ajuda!
$( 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>