Categoria retrátil

[Consolado]

Qual é sua questão:
Bom dia pra quem é de dia, boa tarde pra quem é de tarde e boa noite pra quem é de noite! A versão Invision possui um tipo de categoria inovadora, que permite que você contraia e descontraia quando desejar, o que torna a página mais limpa e de fácil visualização. Eu gostaria de um meio para colocar esse recurso em meu fórum, a categoria retrátil, para que quando clicarmos no ícone ela fechar-se. Preciso da ajuda de vocês. Sucesso a ShiftActif e Happy New Year for all!

Endereço e versão do meu fórum:
PHPBB3

Apresente-nos imagens do problema (se necessário):
Não é necessário.

[StyLe®]

Também quero obter o efeito, vou postar aqui para ficar gravado no meu /sta

[Shek]

Olá!

Você pode seguir os passos do seguinte tutorial: http://ajuda.forumeiros.com/t26394-tutorial-efeito-opacidade-no-forum-fad-in

Atenciosamente,

[Consolado]

What? Desculpe, não encontrei nada relacionado nesse tutorial. Nesse também não: http://ajuda.forumeiros.com/t23387-tutorial-criar-uma-categoria-retratil#137729

O código desse tutorial não funciona em meu fórum. Muito menos sem as tags <script></script>.

Obrigado e sucesso a ShitActif.

[MateusV.]

Olá,

Crie um novo código javascript com o investimento marcado "No índice" e com este código:

Código:

jQuery(document).ready(function(){jQuery('.forabg li.header').each(function(){jQuery(this).append('<img src="http://2img.net/i/fa/m/tabs_less1.gif" id="abrirf" />');jQuery(this).find('#abrirf').click(function(){var i=jQuery(this).closest('.forabg').find('.topiclist.forums');if(i.css('display')=='none'){i.fadeIn();jQuery(this).find('#abrirf').attr('src','http://2img.net/i/fa/m/tabs_less1.gif');}else{i.fadeOut();jQuery(this).find('#abrirf').attr('src','http://2img.net/i/fa/m/tabs_more1.gif');}});});});

Feito isto adicione este código em seu CSS:

Código:

#abrirf {
float: right;
margin-top: -20px;
margin-right: 10px;
}

Melhores cumprimentos.

[Consolado]

Certíssimo Mateus, mais o ícone não muda. Quando é pra fecharmos, aparece um sinal, um hífen. Mas quando é pra abrir continua assim ao invés de um "+".

[MateusV.]

Olá,

Eu havia esquecido de colocar uma coisa no código

Substitua por:

Código:

jQuery(document).ready(function(){jQuery('.forabg li.header').each(function(){jQuery(this).append('<img src="http://2img.net/i/fa/m/tabs_less1.gif" id="abrirf" />');jQuery(this).find('#abrirf').click(function(){var i=jQuery(this).closest('.forabg').find('.topiclist.forums');if(i.css('display')=='none'){i.fadeIn();jQuery(this).attr('src','http://2img.net/i/fa/m/tabs_less1.gif');}else{i.fadeOut();jQuery(this).attr('src','http://2img.net/i/fa/m/tabs_more1.gif');}});});});

[Consolado]

Consegui alterar as imagens que você colocou. Obrigado. Só mais uma coisa, tem como que eles sejam exibidos somente depois que colocar o mouse sobre a determinada categoria? Em modo hover.

[MateusV.]

Adicione em seu CSS:

Código:

#abrirf {
    display: none;
}
.forabg :hover #abrirf {
    display: block;
}

Abraços.

[Consolado]

Eu substitui ".forabg :hover" por ".forabg .header:hover" e ficou como eu queria. Obrigado.

[Conteúdo patrocinado]