Como esconder a c-box

Oi meninas e meninos :) Hoje trouxe mais um tutorial de html para vocês (que agora quero começar a fazer mais) o de hoje é como esconder a c-box, tenho como exemplo esse layout do fashion scream :

É assim que fica, uma imagem na sidebar e quando você clica nela, desliza a c-box para baixo da imagem, quando não quiser mais vê-la clique na imagem de novo, legal né ? vamos aprender !

1) Vá no seu html e procure (ctrl = f) pela tag : </head>

2) ACIMA dela cole o código

<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>

3) Salve o HTML
4) vá no design do seu blog e crie um novo gadget de html/javascript e cole o código:

<a href="javascript:animatedcollapse.toggle('dog')"><img src="LINK DA IMAGEM "/></a><div id="dog" style="display:none"> Cole o HTML da c-box</div>

5)Salve o gadget e pronto

Fácil né galerinha, esse é o post de hoje, não esqueçam de conferir outros goodies do blog