Afiliados Expansível (Menu de afiliados organizado)

Yooo meus pãozinhos de mel? Hoje trago mais um tutu para vocês meus amores, acho que vocês já devem ter visto menu de afiliados que só aparecem quando você clica na quele botãozinho escrito "Mostrar" ou "Mais/Menos"? Então é esse que vamos fazer agora! Para terem uma ideia, eu fiz no blog de teste basta clicar no botão mais abaixo para ver.

Brevia do efeito

1. Para isso vá em seu Layout, depois crie um Gadget de HTML e dentro dele você cola o seguinte código:

Códigos

<div class="divspoiler">
<img src="URL DA IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
CODIGO DOS LINKS
</div></div>

Agora e só colocar como se pede! Eu deixarei uma imagem de demostração para vocês! Eu acho bem legal usar esse efeito com o  Menu Pixel, assim quando a pessoa clicar ele vai aparecer como uma listinha, basta usar a imaginação.

2. Caso queiram usar o mesmo tutorial mas sem  da imagem, basta usar esse código colocando uma frase no lugar indicado

Códigos

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Aqui a frase</a>
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que fica fechado.
</div></div>

Beijokas e ate mais tarde!!!