Painel de usuário

Qual é minha questão:
Como fazer para o meu painel de usuário tenha o mesmo efeito do deste fórum.

Ou seja, links ficam inicialmente escondidos, e quando se clica na categoria, ele abri e mostra os links. Também quero saber como fazer com que somente uma parte fique aberta, ou seja, quando abrir uma para ver o link aparecer normalmente, mas quando for clicar em outra, essa se fecha e a outra abri?

Outra coisa, como coloca imagens antes dos nomes?


Medidas que eu tomei para corrigir o problema:
Nenhuma!

Links e imagens do meu problema:
Não tem!

Endereço do meu fórum:
tudaki.forumeiros.com

Versão do meu fórum:
PHPBB3

Olá, crei um widget personalizado com este codigo

Código:

    <script src="http://illiweb.com/fa/js_16/collapsible_faq.js" type="text/javascript"></script>
        <font size="4">{USERLINK}</font><script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        jQuery('#avatar').attr('src', link);
        });
        });
        </script>
        <span style="font-size: 1.2em;"><img id="avatar" align="left" width="50">

        <b>Mensagens:</b> {USERCOUNTPOST}

        <span id="friends_cook"></span>

   
    </span>
            <dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onclick="return CFAQ.display('l7', false);">
            <div style="cursor: pointer;" onclick="return CFAQ.display('l7', true);" onfocus="this.blur();"><img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" style="width: 15px;height: 15px" border="0"> Alterar</div></dd><dd style="display:none;" id="l7"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&amp;page_profil=informations" target="_blank"> Informações </a></span><span style="font-size: ;">
            <a href="../profile?mode=editprofile&amp;page_profil=preferences" target="_blank"> Preferências </a></span><span style="font-size: ;"><br><a href="../profile?mode=editprofile&amp;page_profil=avatars" target="_blank"> Avatar </a></span></dd><dd onclick="return CFAQ.display('l8', false);">
            <div style="cursor: pointer;" onclick="return CFAQ.display('l8', true);" onfocus="this.blur();"><img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" style="width: 15px;height: 15px" border="0"> Ver</div></dd>
            <dd style="display:none;" id="l8"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&amp;page_profil=friendsfoes" target="_blank"> Amigos e ignorados</a></span><span style="font-size: ;"><a href="../search?search_id=watchsearch" target="_blank"> Tópicos supervisionados </a></span><br><span style="font-size: ;"><a href="../search?search_id=draftsearch" target="_blank"> Rascunhos </a></span><br><span style="font-size: ;"><a href="../search?search_id=favouritesearch" target="_blank"> Tópicos favoritos</a></span></dd><dd onclick="return CFAQ.display('l9', false);">
            <div style="cursor: pointer;" onclick="return CFAQ.display('l9', true);" onfocus="this.blur();"><img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" style="width: 15px;height: 15px" border="0"> Tópicos e mensagens</div></dd><dd style="display:none;" id="l9"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../msg.forum?folder=inbox" target="_blank"> Mensagens Privadas</a></span><span style="font-size: ;"><a href="../search?search_topics={USERNAME}" target="_blank"> Meus tópicos</a></span><br><span style="font-size: ;"><a href="../search?search_id=egosearch" target="_blank"> Tópicos que participo </a></span><br><span style="font-size: ;"><a href="../search?search_author={USERNAME}&amp;show_results=posts" target="_blank"> Minhas mensagens</a></span><br><span style="font-size: ;"><a href="../search?search_id=newposts" target="_blank"> Novas mensagens<br></a></span></dd></dl>


Cordialmente.

Só uma coisa, tem como colocar os links embaixo da foto, igual neste fórum?

E se possivel também as mensagens!

Outra coisa, não tem haver com este post, não teria uma maneira de aplicar esse código ai para aquela pergunta minha de esconder o conteudo dos widgets?

Responde quando avabar aqui...
Link

Olá, bom, não entendi suas outras perguntas, pois o codigo ja esta programado para isto, quanto a utima
crie um widget personalizado com este codigo

Código:

<a id="clickme" href="#">Clique aqui para mostrar/esconder o widget</a></br><div id="book">    <script src="http://illiweb.com/fa/js_16/collapsible_faq.js" type="text/javascript"></script>
        <font size="4">{USERLINK}</font><script>
        jQuery(document).ready(function(){
        jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
        link = jQuery('.panel dl:first img', data).attr('src');
        jQuery('#avatar').attr('src', link);
        });
        });
        </script>
        <span style="font-size: 1.2em;"><img id="avatar" align="left" width="50">

        <b>Mensagens:</b> {USERCOUNTPOST}

        <span id="friends_cook"></span>

   
    </span>
            <dl class="faq" style="margin-bottom: -1px !important;"><dt></dt><dd onclick="return CFAQ.display('l7', false);">
            <div style="cursor: pointer;" onclick="return CFAQ.display('l7', true);" onfocus="this.blur();"><img src="http://i66.servimg.com/u/f66/15/86/37/09/config10.png" style="width: 15px;height: 15px" border="0"> Alterar</div></dd><dd style="display:none;" id="l7"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&amp;page_profil=informations" target="_blank"> Informações </a></span><span style="font-size: ;">
            <a href="../profile?mode=editprofile&amp;page_profil=preferences" target="_blank"> Preferências </a></span><span style="font-size: ;"><br><a href="../profile?mode=editprofile&amp;page_profil=avatars" target="_blank"> Avatar </a></span></dd><dd onclick="return CFAQ.display('l8', false);">
            <div style="cursor: pointer;" onclick="return CFAQ.display('l8', true);" onfocus="this.blur();"><img src="http://i66.servimg.com/u/f66/15/86/37/09/new_ic10.png" style="width: 15px;height: 15px" border="0"> Ver</div></dd>
            <dd style="display:none;" id="l8"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../profile?mode=editprofile&amp;page_profil=friendsfoes" target="_blank"> Amigos e ignorados</a></span><span style="font-size: ;"><a href="../search?search_id=watchsearch" target="_blank"> Tópicos supervisionados </a></span><br><span style="font-size: ;"><a href="../search?search_id=draftsearch" target="_blank"> Rascunhos </a></span><br><span style="font-size: ;"><a href="../search?search_id=favouritesearch" target="_blank"> Tópicos favoritos</a></span></dd><dd onclick="return CFAQ.display('l9', false);">
            <div style="cursor: pointer;" onclick="return CFAQ.display('l9', true);" onfocus="this.blur();"><img src="http://i66.servimg.com/u/f66/15/86/37/09/ecrire10.png" style="width: 15px;height: 15px" border="0"> Tópicos e mensagens</div></dd><dd style="display:none;" id="l9"><span style="margin: 0pt 0px 0pt 0px; display: block;"><a href="../msg.forum?folder=inbox" target="_blank"> Mensagens Privadas</a></span><span style="font-size: ;"><a href="../search?search_topics={USERNAME}" target="_blank"> Meus tópicos</a></span><br><span style="font-size: ;"><a href="../search?search_id=egosearch" target="_blank"> Tópicos que participo </a></span><br><span style="font-size: ;"><a href="../search?search_author={USERNAME}&amp;show_results=posts" target="_blank"> Minhas mensagens</a></span><br><span style="font-size: ;"><a href="../search?search_id=newposts" target="_blank"> Novas mensagens<br></a></span></dd></dl></div>

Feito isto aceda ao seu

Painel de controle Modulos HTML e Java Script Gestão dos codigos Java Script

Crie um novo java script com o investimento marcado em todas as paginas. e com este codigo

Código:

$(document).ready(function() {
$('#book').hide();
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// By: MateusV.
});
});
});

Feito isto clique em salvar, não edite o codigo eu ja editei...
Cordialmente.

Agora eu não entendi, esse codigo ai é pra que

Olá, para mostrar e esconder o widget do painel do usuario...
Cordialmente.

Não, não, os que eu quero esconder não é deste tópico é daquele lá do tópico que eu postei...

E descobri o erro que tinha... era que minha imagem era muito pequena, obrigado.

O que eu quis dizer com aquela pergunta, foi se tem alguma forma de esconder os widgets, sendo esses quaisquer um, como se faz com esses link's, e ia pedir para você responder lá...

Obrigado pergunta respondida, e já levou meu agradecimento. Podem fechar.