Tutorial: Script para esconder objetos + Aviso

Mais um tutorial bem fácil aqui no blog! Eu não sei se vocês já viram que a nossa c-box ali na barra lateral fica escondida, e só quando clicamos na imagem que ela abre. Vamos aprender a fazer isso?

Passo 1
Vá em Design (ou Modelo) > Editar HTML e procure (Ctrl+F) por </head>.

Passo 2
Acima da tag cole o código abaixo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Passo 3
Pronto! Agora quando quiser usar basta colocar o seguinte código:

<a href="javascript:animatedcollapse.toggle('dog')"><img src="LINK DA IMAGEM QUE VAI ABRIR A C-BOX"/></a>
<div id="dog" style="display:none"> Coloque aqui o conteúdo</div>

Você não precisa usar só imagens para esconder o conteúdo! Se quiser usar um texto troque a parte em rosa pelo texto desejado.

Conseguiram?

Ah, desculpa pelos inúmeros pedidos, hehe, mas estamos ajudando uma amiga a divulgar o concurso dela! Então por favor, clique aqui e participe!

Beijos,
Camy!