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


Como colocar algo oculto no blog, vamos ao tutorial ▼

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

Veja um exemplo clicando sobre o botão: 

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 ▼▲


Se preferir uma imagem:
Vamos aos códigos ▼

 Código com botão ▼
<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="divspoiler" style="display: none;">
COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO
</div></div>

 Código com Texto▼
<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="divspoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>

 Código com imagem▼
<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="divspoiler" style="display: none;">
Aqui o conteúdo que queremos ocultar
</div></div>

tag de buscas: Ocultar, Esconder, Ocultar algo em seu blog