Como deixar uma parte do fórum dentro de um SPOILER???

Detalhes da questão

Endereço do fórum: http://www.schultzgames.com/
Versão do fórum: PhpBB3

Descrição

Olá pessoal, tenho este trecho de código, que faz aparecer as regras do meu fórum abaixo dos tópicos recentes...

Código:


$(function() {
$('#main-content').before(' <style> #tabela1 { display: table; background: #FFFAF0; width: 100%; height: 270px; float: center; border: 1px solid black; margin-top: 20px; border: 1px solid rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px; box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px; } body { background: url(http://2img.net/s/t/16/90/42/i_background.jpg); background-attachment: fixed; color: #5a5a5a; font: normal 11px tahoma, helvetica, arial, sans-serif; padding-bottom: 20px; } .redesociais { position: center; }</style><link href="http://i39.servimg.com/u/f39/19/00/36/21/loooo10.png" type="image/x-icon" rel="shortcut icon" /><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><title>Avisos</title><table id="tabela1"> <tbody> <tr> <td> <div style="font-size: 15px; border-radius:5px; background:transparent; margin-bottom:10px;width:100%; height:100%;margin-top: -1%;"> <br /> <center> <br /><strong>REGRAS DE UTILIZAÇÃO DO FÓRUM</strong> <br /> <hr /> </center> <b>1-</b> Nomes de usuário impróprios terão seus nicks mudados sem aviso prérvio. Nomes ofensivos serão banidos de imediato do fórum. <br/> <b>2-</b> Não é permitido postar novamente em um tópico se o seu comentário for o último. Caso queira adicionar algo, edite o último post ou aguarde 24h. <br/> <b>3-</b> Caso queira criar um tópico, crie-o na área correta. Se for uma dúvida, poste em "Dúvidas em geral". Se for tutorial, poste em "Tutorial dos membros", e assim por diante. <br/> <b>4-</b> Para aderir a uma categoria (Moderador, Programador, etc), consulte o link: <a href="http://www.schultzgames.com/t594-aderir-a-uma-categoria-no-forum">Aderir em categorias</a> <br/> <b>5-</b> Só serão aceitos anúncios de canais próprios ou sites próprios, se os mesmos forem sobre programação ou desenvolvimento de games com Unity 3D <br/> <b>6-</b> O fórum é para resolução de dúvidas, portanto, venham com dúvidas. Pedir scripts prontos ou resoluções milagrosas sem querer aprender, apenas levará o usuário a ser ignorado posteriormente. <br/> <b>7-</b> Qualquer tipo de ofensa a membros será punido com ban temporário. Post de ponrografia ou conteúdo impróprio será punido com ban permanente. <br/> <b>8-</b> Não poste dúvidas em tópicos não relacionados ao assunto. Se tiver uma dúvida, crie um tópico na área "Dúvidas em geral". <hr /> <table style="padding: 3px 3px 0px; font-size: 0.8em; margin-bottom: 0px; margin-top: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; width: 90%;"> <tbody> <tr valign="top"> <td> <strong>Consulte: </strong> <br/><a href="http://www.schultzgames.com/t603-regras-do-forum">Regras</a>&nbsp;&nbsp;&nbsp;<a href="http://www.schultzgames.com/t594-aderir-a-uma-categoria-no-forum">Entre para a equipe</a>&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCsXIdvfp138xs1K1eTsaezQ/videos">Canal no YouTube</a>&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/TutoriaisUnity3DBrasil">Página no FaceBook</a> </td> </tr> </tbody> </table> ');
});


A minha intenção seria deixar apenas um titulo escrito "REGRAS DE UTILIZAÇÃO DO FÓRUM" bem como está lá, e em baixo ou do lado, um spoiler que por padrão vem minimizado...

Quando clica-se no spoiler, aparece as regras, como um /spoiler normalzão...

Isto é possível?

Olá!

Use este código:

Código:

$(function() {
    $('#main-content').before('<style> #tituloHancki { cursor: pointer;} #textoHancki { display: none; } #tabela1 { display: table; background: #FFFAF0; width: 100%; height: auto; float: center; border: 1px solid black; margin-top: 20px; border: 1px solid rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px; box-shadow: inset rgba(255, 255, 255, 0.25) 0px 0px 0px 1px; } body { background: url(http://2img.net/s/t/16/90/42/i_background.jpg); background-attachment: fixed; color: #5a5a5a; font: normal 11px tahoma, helvetica, arial, sans-serif; padding-bottom: 20px; } .redesociais { position: center; }</style> <link href="http://i39.servimg.com/u/f39/19/00/36/21/loooo10.png" type="image/x-icon" rel="shortcut icon" /> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <title>Avisos</title> <table id="tabela1"> <tbody> <tr> <td> <div style="font-size: 15px; border-radius:5px; background:transparent; margin-bottom:10px;width:100%; height:100%;margin-top: -1%;"> <br /> <center id="tituloHancki"> <br /><strong>REGRAS DE UTILIZAÇÃO DO FÓRUM</strong> <br />  </center> <div id="textoHancki"><hr /> <b>1-</b> Nomes de usuário impróprios terão seus nicks mudados sem aviso prérvio. Nomes ofensivos serão banidos de imediato do fórum. <br/> <b>2-</b> Não é permitido postar novamente em um tópico se o seu comentário for o último. Caso queira adicionar algo, edite o último post ou aguarde 24h. <br/> <b>3-</b> Caso queira criar um tópico, crie-o na área correta. Se for uma dúvida, poste em "Dúvidas em geral". Se for tutorial, poste em "Tutorial dos membros", e assim por diante. <br/> <b>4-</b> Para aderir a uma categoria (Moderador, Programador, etc), consulte o link: <a href="http://www.schultzgames.com/t594-aderir-a-uma-categoria-no-forum">Aderir em categorias</a> <br/> <b>5-</b> Só serão aceitos anúncios de canais próprios ou sites próprios, se os mesmos forem sobre programação ou desenvolvimento de games com Unity 3D <br/> <b>6-</b> O fórum é para resolução de dúvidas, portanto, venham com dúvidas. Pedir scripts prontos ou resoluções milagrosas sem querer aprender, apenas levará o usuário a ser ignorado posteriormente. <br/> <b>7-</b> Qualquer tipo de ofensa a membros será punido com ban temporário. Post de ponrografia ou conteúdo impróprio será punido com ban permanente. <br/> <b>8-</b> Não poste dúvidas em tópicos não relacionados ao assunto. Se tiver uma dúvida, crie um tópico na área "Dúvidas em geral". <hr /> <table style="padding: 3px 3px 0px; font-size: 0.8em; margin-bottom: 0px; margin-top: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; width: 90%;"> <tbody> <tr valign="top"> <td> <strong>Consulte: </strong> <br/><a href="http://www.schultzgames.com/t603-regras-do-forum">Regras</a>&nbsp;&nbsp;&nbsp;<a href="http://www.schultzgames.com/t594-aderir-a-uma-categoria-no-forum">Entre para a equipe</a>&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com/channel/UCsXIdvfp138xs1K1eTsaezQ/videos">Canal no YouTube</a>&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/TutoriaisUnity3DBrasil">Página no FaceBook</a></td> </tr> </tbody> </table> </div></div>');
    $('#tituloHancki').click(function() {
        $('#textoHancki').toggle(1000);
    });
});

Hancki

Nossa, tem até um delay; Ficou 100%

Muito obrigado!