terça-feira, 2 de janeiro de 2018

Como esconder e mostrar texto com um botão





Tá vendo o botão acima? Hoje vamos aprender como colocá-lo em seu blog/site.

Tal tarefa é bastante simples e prática. Pra realizá-la vamos precisar apenas do código HTML abaixo:

<div id="spoiler1" style="display: none;">TEXTO OCULTADO AQUI</div><button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" title="Clique para mostrar/ocultar" type="button">Ver resposta!</button><br /><br />

Guarde-o!

* Após guardar, copie o código.
* Em seguida, vá na edição de sua postagem.
* Existem duas abas, a de "Escrever" e a "HTML".
* Clique em "HTML".
* Cole o código no próprio espaço da postagem.
* Publique!

Vai ficar assim:


Agora a parte mais importante do tutorial...

1- Como eu coloco o texto que eu quero dentro do botão?
Tá vendo a parte "TEXTO OCULTADO AQUI" do nosso código? Então, é ali que você vai colocar o texto que você quer que apareça.
2- Pra inserir novos botões na mesma postagem, o que eu faço?
Para adicionar novos botões o procedimento é o mesmo, MAS VOCÊ DEVE ALTERAR ALGUNS CAMPOS DO CÓDIGO. Por exemplo, você está colocando o segundo botão, então deve ir para todos os campos "spoiler1" do código e alterá-los para "spoiler2".

Nenhum comentário:

Postar um comentário