Post Top Ad

Como colocar um botão para ocultar e mostrar o conteúdo de um post.

Como colocar um botão para ocultar e mostrar o conteúdo de um post.
Se fizer uma post muito grande ou simplesmente quiser ocultar uma parte do post, pode fazê-lo de uma forma simples utilizando javascript. 

Veja o codigo: 


<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 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: 
<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: 
<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>
setembro 02, 2015 / by / 0 Comments

Sem comentários:

Enviar um comentário

Post Top Ad