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

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:

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:













<div class="divspoiler"><br /> <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'; }" /><br /> </div><div><div class="spoiler" style="display: none;"><br /> COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO<br /> </div></div>




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:













<div class="divspoiler"><br /> <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><br /> </div><div><div class="spoiler" style="display: none;"><br /> Aqui o conteúdo que queremos ocultar<br /> </div></div>






Se preferir uma imagem:

FAQ

Use o código:













<div class="divspoiler"><br /> <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';}" /><br /> </div><div><div class="spoiler" style="display: none;"><br /> Aqui o conteúdo que queremos ocultar<br /> </div></div>




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.