Como criar um botão ''imput'' para Mostrar e Ocultar textos

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

<textarea rows="5" cols="50" style="background-color: #ffffff; color: rgb(0, 0, 0);" wrap="soft"><div class="pre-spoiler"><input id="xs" value="Leia Mais" style="margin-left: 50px; padding: 0px; width: 80px; " 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>

Cloque este código em um gadget de HTML/JAVASCRIPT, ou no HTML da postagem.
A parte em vermelha do código, é onde vai o conteúdo que ficara escondido e depois sera mostrado.
A parte em azul é o nome do botão quando o texto está escondido. A parte em A parte verde é o nome do botão para esconder o texto quando ele for aberto.

Share This :