Controlando show/hide com css – Deixando para o javascript apenas a troca de uma classe pai
Boas =)
A minha proposta aqui, é controlar toda a lógica do show/hide com css.
Em vez de fazermos malabarismos com coisas como:
document.getElementById("Carro").className = "invisivel"; document.getElementById("Moto").className = "invisivel"; document.getElementById("Pesados").className = "invisivel"; document.getElementById("Agrícolas").className = "invisivel"; document.getElementById("selecione").className = "invisivel"; document.getElementById(div).className = "visivel";
E ai, qndo tiver q mostrar mais de um elemento a cada option do select, recorrer a colocar mais linhas/parâmetros no js.
O javascript que proponho é o seguinte:
function id( obj ){ return document.getElementById( obj ); } window.onload = function(){ id('escolha').onchange = function(){ id('pai').className = this.value; } }
E conforme queiramos mais elementos a serem mostrados, ou mais regras, não temos que alterar absolutamente nada no js.
Apenas no html, e no css.
Veja que toda a lógica de mostrar/esconder, está no css:
p, #lista li { display: none; } .carros #palio, .carros #punto, .carros #gol, .carros #volks { display: block; } .animais #gato, .animais #cao, .animais #vet { display: block; } /* deixei separado apenas para facilitar o entendimento */ .linguagens #ajax, .linguagens #js, .linguagens #css, .linguagens #programador { display: block; }
A primeira regra css, esconde tudo.
As demais, vão dando block, conforme uma classe pai. Exatamente a que estamos alterando via js.
É isso. O que vc acha dessa abordagem ?
<html> <head> <title>Show/Hide com css</title> <script type="text/javascript"> function id( obj ){ return document.getElementById( obj ); } window.onload = function(){ id('escolha').onchange = function(){ id('pai').className = this.value; } } </script> <style type="text/css"> p, #lista li { display: none; } .carros #palio, .carros #punto, .carros #gol, .carros #volks { display: block; } .animais #gato, .animais #cao, .animais #vet { display: block; } .linguagens #ajax, .linguagens #js, .linguagens #css, .linguagens #programador { display: block; } </style> </head> <body> <select name="escolha" id="escolha"> <option value="">Esconder todos</option> <option value="carros">Carros</option> <option value="animais">Animais</option> <option value="linguagens">Linguagens</option> </select> <div id="pai"> <ul id="lista"> <li id="palio">Palio</li> <li id="punto">Punto</li> <li id="gol">Gol</li> <li id="gato">Gato</li> <li id="cao">Cão</li> <li id="ajax">AJAX</li> <li id="js">JS</li> <li id="css">CSS</li> </ul><!-- /lista --> <p id="volks">Volks</p> <p id="vet">Veterinária</p> <p id="programador">Programador</p> </div> </body> </html>