Dicas do Artony: Como criar um botão para ocultar e mostrar

Olá Prezados leitores do Blog Dicas do Artony!

Nessa postagem vou mostrar como criar um botão que permite ocultar e mostrar qualquer tipo de conteúdo! Esse botão pode ser muito útil para esconder informações adicionais em uma postagem, imagens de um tutorial em uma postagem, etc. Use-o ao seu gosto! (Créditos do código base para o Blog: Blogger Passo a Passo).

O código deverá ser inserido em modo HTML no editor do Blogger e após inserir o mesmo, você NÃO pode clicar no modo Escrever. Por motivo que desconheço, o modo Escrever quebra o código e ele não funciona!

Outro detalhe muito importante, é que o código NÃO pode sofrer quase nenhuma alteração, como uma quebra de linha por exemplo! O que pode e deve ser alterado, são os valores dentro das propriedades CSS "Style", de acordo com o seu gosto.

Esses botões não se alinham lado a lado. É possível centralizá-los colocando-os dentro da tag: <center></center>.

Dados os avisos importantes, aqui está o código base do botão ocultar e mostrar e em seguida, a reprodução do código.

Botão ocultar e mostrar (Código base)

<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;">
Aqui fica o conteúdo ocultado pelo botão, que será mostrado quando o mesmo for clicado.
</div></div>

Observe na segunda linha do código acima, a palavra "Mostrar" (1), essa palavra entre as aspas pode ser alterada e será exibida no botão em estado de espera.
Na terceira linha do código acima, a palavra "Ocultar" também pode ser alterada e será exibida quando o botão for clicado.
Na quarta linha do código acima, a palavra "Mostar" (2) também pode ser alterada e será exibida quando o botão for clicado e ocultado (Seria o equivalente a "Mostrar de novo").
Onde está o texto azul acima, é onde será escrito o texto ou colocado o conteúdo que será ocultado pelo botão.

O botão acima, convenhamos, é muito simples e pouco atraente visualmente falando. Usando um pouco de CSS (Style) podemos deixá-lo mais bonito! O resultado você pode ver no código abaixo e em seguida na reprodução do código customizado! Toda parte na cor verde nos códigos abaixo, são valores de propriedades CSS que foram adicionadas na customização!

Botão ocultar e mostrar (Código customizado 1).

<div class="divspoiler">
<input type="button" value="↓ Mostrar Conteúdo!" style="box-shadow: 0px 2px 2px #555; font-size: 18px; cursor: pointer; font-family: Calibri; color: #FFFFFF; border: none; border-radius: 5px; font-weight: normal; line-height: 18px; background: url(http://i.imgur.com/2s2oeK1.png) repeat-x #CCCCCC; width: 190px; height: 35px" title="Clique para mostrar / ocultar!" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = '↑ Ocultar Conteúdo!'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = '↓ Mostrar Novamente!'; }" />
</div><div><div class="spoiler" style="margin-top: 5px; border: solid 1px #6B89C4; background: #DBE6F9; padding: 5px 10px; font-size: 13px; display: none;">
Aqui fica o conteúdo ocultado pelo botão, que será mostrado quando o mesmo for clicado.
</div></div>

Botão ocultar e mostrar (Código customizado 2. Clique no botão para ver ou copiar o código!).

Botão ocultar e mostrar (Código customizado 3. Clique no botão para ver ou copiar o código!).

Botão ocultar e mostrar (Código customizado 4. Clique no botão para ver ou copiar o código!).

No link a seguir, você encontrará uma tabela de cores com códigos HTML, para fazer as alterações de cores que você quiser! → Clique aqui! O restante fica por conta da imaginação de cada um!

Espero que tenham gostado dessa dica! Gostou? Compartilhe! Um abraço e até a próxima!

Para receber postagens no seu E-mail, assine nossa Newsletter! → Clique e assine agora!

Informar link quebrado eu erro nesta postagem! → dicasdoartony@gmail.com