Ocultar texxtos e imagens

No projeto do 4º ano B, Prof. Marli, precisei aprender este recurso:

Como colocar um botão para ocultar e mostrar o conteúdo de uma postagem


Encontrei num blog muito interessante: http://blogger-passo-a-passo.blogspot.com.br/

E, ele nos ensina:

Se você fizer uma postagem muito grande ou simplesmente quiser ocultar uma parte da postagem, você pode fazê-lo de uma forma simples utilizando javascript.

Veja um exemplo clicando sobre o botão:

 

Este texto permanecerá oculto até que o leitor clique sobre o botão para vê-lo, e poderá escondê-lo clicando novamente no botão.

Podemos colocar não somente textos, como também uma imagem, um vídeo, um reprodutor de audio:


Para isso, basta copiar o código abaixo e colá-lo em sua postagem toda vez que quiser utilizá-lo:

COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO

 

 

 

coloque em modo HTML, clique em " e cole:

<div class="divspoiler">
<img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>

COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO

Agora você só terá que colocar no local indicado, o conteúdo que deseja ocultar. Se preferir, pode usar um texto ao invés do botão: Mostrar / Ocultar ▼▲ Nesse caso, utilize esse código:

Mostrar / Ocultar ▼▲

Aqui o conteúdo que queremos ocultar

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar ▼▲</a>
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>



 

Aqui o conteúdo que queremos ocultar

Se preferir uma imagem: Use o código:

Aqui o conteúdo que queremos ocultar

<div class="divspoiler">
<img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>



 

Aqui o conteúdo que queremos ocultar

Coloque a URL da imagem no local indicado, assim como o conteúdo a ser oculto. Fácil ne? Você pode adicionar quantas vezes quiser na postagem. vPostado por Priscila