Como ocultar/exibir uma DIV no Blogger

Algumas pessoas tem bastante interrese em saber como ocultar e mostrar uma DIV.

Vendo as possibilidades que podem ser criadas através desse comando, resolvi fazer um post ensinando como Criar uma DIV "esconde-esconde" (oculta e exibe).

Para esse comando, usei dois botões do tipo Input, no qual um servirá para ocultar e o outro, para mostrar.

Veja o código usado a seguir:


    <div id="dois" style="visibility: hidden; display: none;"> <br /> Abelhudos da Informática <br /> O melhor blog da informática da internet <br /> Essa é uma div que se oculta/exibe </div> <input type="button" value="Mostra" onclick="document.getElementById('dois').style.display='block'; document.getElementById('dois').style.visibility='visible';"> <input type="button" value="Oculta" onclick="document.getElementById('dois').style.display='none';document.getElementById('dois').style.visibility='hidden';">

Veja como ficará o resultado final do seu DIV que ocultará o conteúdo dentro dela.

Abelhudos da Informática
O melhor blog da informática da internet
Essa é uma div que se oculta/exibe

Você poderá usar esse mesmo comando para ocultar suas imagens, bastando colocar o código html da sua imagem dentro do DIV

Exemplo:

<div id="tres" style="visibility: hidden; display: none;"> <img src="url da imagem" height="altura" width="largura"> </div> <input type="button" value="Mostra" onclick="document.getElementById('tres').style.display='block'; document.getElementById('tres').style.visibility='visible';"> <input type="button" value="Oculta" onclick="document.getElementById('tres').style.display='none';document.getElementById('tres').style.visibility='hidden';">

Você poderá também configurar a sua div para aparecer quando for clicado em um link.
Para isso, basta digitar:

<a href="javascript: void (0)" onclick="document.getElementById('tres').style.display='block';
document.getElementById('tres').style.visibility='visible';">Exibe DIV</a>

e:

<a href="javascript: void (0)" onclick="document.getElementById('tres').style.display='none';document.getElementById('tres').style.visibility='hidden';">oculta DIV</a>

que ficarão assim:

Exibe DIV oculta DIV



Observação: Se você está vendo essa postagem em um Feed, provavelmente não estará entendendo nada. Clique no link do site e veja os códigos de maneira correta!