Efeito onclick como chatbox

Qual é minha questão:
Queria saber como fazer o que está na foto abaixo. Quando se clica naqueles livros, eles se abrem para o lado... Como faço isso?
Foi nesse fórum que vi isso -> http://darkside.forumclan.com/forum

Medidas que eu tomei para corrigir o problema:
Procurei tutoriais.

Imagens do meu problema:
https://i.servimg.com/u/f43/15/53/26/66/print_10.jpg
https://i.servimg.com/u/f43/15/53/26/66/print_11.jpg

Endereço do meu fórum:
http://historia-filosofia.forumeiros.com/forum

Versão do meu fórum:
PHPBB2

Olá,

Mas quer os dois Karol?
Um deles é esse:

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 600px; right: 0px; z-index:1000;"><iframe src="http://darkside.forumclan.com/h9-map" id="mappop" scrolling="yes" style="height: 300px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:900px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#mappop').animate({width:'toggle'},1200); jQuery('#mapopen,#mapclose').toggle();" style="margin-top: 100px; cursor :; float:left"><img src="http://i42.servimg.com/u/f42/11/52/02/77/button10.png" title="ABRIR MAPA" id="mapopen" style="display: inline; "><img src="http://i42.servimg.com/u/f42/11/52/02/77/button10.png" title="FECHAR MAPA" id="mapclose" style="cursor:; display:none ; "></div>

Até!

O site é meu =)
No caso, eu adicionei diretamente no template (mais precisamente no overall_header).
Um dos códigos é esse que o Jeffrey mandou. E o outro é:

Código:

<div style="overflow: visible; position: fixed; bottom: 30px; height: 400px; right: 0px; z-index:1000;"><iframe src="   http://darkside.forumclan.com/h10-magias" id="magiaspop" scrolling="yes" style="height: 60px; float: right; overflow-x: visible; overflow-y: visible; display: none; width:900px" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onclick="jQuery('#magiaspop').animate({width:'toggle'},1200); jQuery('#magiasopen,#magiasclose').toggle();" style="margin-top: 0px; cursor :; float:left"><img src="http://i42.servimg.com/u/f42/11/52/02/77/i_icon11.png" title="ABRIR MAGIAS" id="magiasopen" style="display: inline; "><img src="http://i42.servimg.com/u/f42/11/52/02/77/i_icon11.png" title="FECHAR MAGIAS" id="magiasclose" style="cursor:; display:none ; "></div></div>

Abraço.

Ae cara, esse seu painel de usuario poderia me passar ?

Ae cara, esse seu painel de usuario poderia me passar ?

Ele desconfigurou. To com um problema para acertar a tabela e tal.
Cheguei a pedir ajuda aqui, mas ninguem conseguiu/pode ajudar.
Quando eu ajeitar te passo, sim.
Abraço.

Funcionou.... Dúvida respondida... Thanks!!!

ok punk, quando conseguir manda pm