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


Se preferir uma imagem:

FAQ

Use o código:





<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 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.