Boa tarde! Tô tentando resolver um probleminha (creio eu ser simples).
Fiz um script para mostrar/ocultar as divs porém não estou conseguindo fazer com que quando eu aperte no botão 2, ele oculte a div do botão 1 (ou todas as outras caso tenha mais de 2 divs
).
A idéia é sempre ficar mostrando apenas uma div na tela, independente de quantas tenham.
Exemplo:
function mostrar(id) {
if (document.getElementById(id).style.display == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<!-- Botão 1 -->
<a href="#" onClick="mostrar('exemplo1')">Botão 1</a>
<!-- Texto 1 -->
<div class="hidden" id="exemplo1">
<h2> 1- texto que eu quero ocultar/mostrar</h2>
</div><br>
<br>
<!-- Botão 2 -->
<a href="#" onClick="mostrar('exemplo2')">Botão 2</a>
<!-- Texto 2 -->
<div class="hidden" id="exemplo2">
<h2> 2- texto que eu quero ocultar/mostrar</h2>
</div>
</body>
</html>