Bem, o DOM é uma ferramenta muito útil, que nos disponibiliza inúmeros efeitos dinâmicos bastantes legais. Um deles é mostrar e ocultar elementos inserindo atributos CSS em um elemento. Bem ai está o código comentado, qualquer dúvida, postem.
<html>
<head>
<title>Mostrar janela</title>
<style type="text/css">
#oculta{
display:none;/*propriedade em CSS que define o modo de exibição do elemento, neste caso deixa o elemento oculto*/
background:red;
width:150px;
}
</style>
<script type="text/JavaScript">
function mostra(id){/*inicia a função mostrar, recebendo um valor e armazenando na variável id*/
var elemento=document.getElementById(id);/*captura o elemento que possui o id especificado na variável id, e armazena na variável elemento*/
elemento.style.display="block";/*atribui ao elemento armazanado na variável elemento, o valor block na propriedade display, possibilitando a exibição*/
}
function ocultar(id){/*inicia a função ocultar, recebendo um valor e armazenando na variável id*/
var elemento=document.getElementById(id);/*captura o elemento que possui o id especificado na variável id, e armazena na variável elemento*/
elemento.style.display="none";/*atribui ao elemento armazanado na variável elemento, o valor none na propriedade display, impossibilitando a exibição*/
}
</script>
<body>
<div onclick="mostra('oculta');">Clique aqui!</div><!-- No evento onclick chama a função mostra passando o id do elemento a sofrer as alterações -->
<div id="oculta">
Esta DIV estava oculta.<br/>
<i onclick="ocultar('oculta');">Clique aqui para oculta-la novamente.</i><!-- No evento onclick chama a função ocultar passando o id do elemento a sofrer as alterações -->
</div>
</body>
</html>
