terça-feira, 7 de janeiro de 2014

Botão imput: Mostrar/Ocultar texto

Se seu texto estiver muito grande e não há jeito de resumi-lo, coloque um botão que esconde o texto, ou qualquer conteúdo. Clicando nele o texto se abre.

Demonstração:

<div class="pre-spoiler">
<input id="xs" value="Leia Mais" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Abrir Texto ';}" type="button"> </div>
<div>
<div class="spoiler" style="display: none;">
Seu conteúdo escondido vem aqui!</div>
</div>
Coloque este código em um gadget de HTML/JAVASCRIPT, ou no HTML da postagem.
A parte em vermelho do código representa o conteúdo que ficará escondido e depois será mostrado.
Em roxo, é o texto do botão enquanto o conteúdo ainda não foi aberto. 
Em verde, é o texto do botão para esconder o texto enquanto ele estiver aberto.
Em azul, é o texto do botão quando o conteúdo está escondido e já foi aberto

Nenhum comentário:

Postar um comentário