5

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.

5 comentários:

  1. arruma por favor nao tem nenhma parte em vermelho.wlw

    ResponderExcluir
  2. Angel sem ser mal educado, mas você não sabe ler???
    num precisa estar em vermelho. Se você quer se aprofundar em uma linguagem (tipo HTML) você não deve só copiar e colar, você tem que ler e estudar, achar a a parte que deseja alterar, etc. Mas onde você altera, está bem à vista! Tá aqui:

    [...] class="spoiler" style="display: none;">
    Seu conteúdo escondido vem aqui![...]

    Não é permitido usar a tag DIV então não posso colocar elas mas ta aew


    Na penúltima linha. Vlww

    ResponderExcluir
  3. Como colocar este código mais de uma vez em um mesmo post?

    ResponderExcluir
  4. @MARIOALMEIDA basta colocar duas ou mais vezes o mesmo código no post na aba "HTML" para obter mais botões.

    ResponderExcluir