I have a set of divs below the header (cardiac, abdominal, facial ...), each with its respective link, using the same names. I need when I select one of the buttons, it becomes "active" even with the page exchange, because each button has its own page. Ex: I am on the "Facials" page, it is active, below I have a Collapse list with some content, with the first item also active, I click on "Vocals" next button, the page would be changed, the "Vocals" button and the first item in the list below would be active, I am using two JS scripts, one to activate the buttons and the collapse, and another to hide a collapse and show another one depending on the selected item in the list, thank you for help!
<div id="botao-cardiacas-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="especialidades-padding img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\cardiacas.png"/><pclass="texto-especialidades-2">
Cardíacas
</p>
<p class="texto-especialidades-sub-2">
Problemas com bateria
</p>
</a>
</div>
<div id="botao-abdominais-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\abdominais.png"/><pclass="texto-especialidades-2">
Abdominais
</p>
<p class="texto-especialidades-sub-2">
Problemas com botão Home
</p>
</a>
</div>
<div id="botao-faciais-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\faciais.png"/><pclass="texto-especialidades-2">
Faciais
</p>
<p class="texto-especialidades-sub-2">
Problemas com a tela
</p>
</a>
</div>
<div id="botao-vocais-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\vocais.png"/><pclass="texto-especialidades-2">
Vocais
</p>
<p class="texto-especialidades-sub-2">
Falantes e microfones
</p>
</a>
</div>
<div id="botao-estetica-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\estetica.png"/><pclass="texto-especialidades-2">
Estética
</p>
<p class="texto-especialidades-sub-2">
Tampa traseira
</p>
</a>
</div>
<div id="botao-cognitiva-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="especialidades-padding img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\cognitiva.png"/><pclass="texto-especialidades-2">
Cognitiva
</p>
<p class="texto-especialidades-sub-2">
Antenas Wifi e GSM
</p>
</a>
</div>
<div id="botao-visuais-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="especialidades-padding img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\visual.png"/><pclass="texto-especialidades-2">
Visuais
</p>
<p class="texto-especialidades-sub-2">
Câmeras
</p>
</a>
</div>
div id="botao-respiratorio-2">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="especialidades-padding img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\respiratorio.png"/><pclass="texto-especialidades-2">
Respiratório
</p>
<p class="texto-especialidades-sub-2">
Dados e sistema operacional
</p>
</a>
</div>
<div id="botao-outros">
<a class="link1" href="http://localhost/hospital-iphone/cardiacas/">
<img class="img-container" src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\outros.png"/><pclass="texto-especialidades-2">
Outros
</p>
<p class="texto-especialidades-sub-2">
Outros serviços
</p>
</a>
</div>