Esconder e Mostrar DIV's

Ae galera, blza?

Aqui vai minha primeira dica no site do Código Fonte, esta dica eu vi ajudando uma pessoa no fórum, aqui mesmo.
Nada mas é do que esconder e mostrar divs, assim economizando: tempo e espaço do seu site.

Nos exemplos estou utilizando 3 divs, com ID's diferentes.

<script>
function OpenSel(op) {

if (op == 1) {
document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";
}else if (op == 2) {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";
}else {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";
}
}
</script>
<div id="principal">
<a href="#" onclick="OpenSel(2);">Mostrar DIV 1</a>

<a href="#" onclick="OpenSel(3);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>

Outra maneira de fazer este código é utilizando CASE em javascript, veja:

<script>
function abrefecha(obj) {

switch (obj.id) {
case 'primeiro':

document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";

break
case 'segundo':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";

break

case 'terceiro':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";

break
}
}
</script>
<div id="principal">
<a href="#" id="segundo" onclick="abrefecha(this);">Mostrar DIV 1</a>

<a href="#" id="terceiro" onclick="abrefecha(this);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>

Espero que tenham gostado!

Abraços.

Enviar um Artigo