Javascript de abrir e fechar, ao clicar.. Ter 18 Fev 2014 - 17:49
Qual é minha questão:
Vejam este código:
Procurem por 'VILAS / PRINCIPAL / ÁREA OFF'
Em baixo dos respectivos nomes, tem links que estão dentro de uma div ocultados. Quero que ao clicar em cada link os que estão em baixo apareção com o slideToogle do javascript.
Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão:
PunBB
Vejam este código:
- Código:
<div class="guestMessage">
<div class="guestHeader">
Bem-vindo ao <em><span style="color: black">Naruto FullBuster</span></em>!
</div>
<img src="http://i.imgur.com/BtwWYcG.png" style="float: left;width: 100px;height: 100px;" />
<p style="margin-left: 5px !important;position: relative !important;left: 5px !important;">
Em nosso fórum, o principal assunto abordado é sobre um RPG de Naruto. Cujo tem como o seu criador, Mateus Paranhos. Neste fórum, poderá: Criar uma ficha ninja para existir em nosso game, matar ninjas, viver aventuras, caçar ninjas, ser dono de uma vila, proteger os seus amigos, ficar em paz. Além das inúmeras coisas que podem fazer em OFF, ou seja, que não contam exatamente no Game, como criar Fillers, fan-fics, templates etc.
</p>
<br />
<div class="teste-e-sdanise" align="center">
<img style="width: 20px;height: 20px;" src="http://www.iconesbr.net/iconesbr/2009/02/7455/7455_64x64.png" /><a href="" onclick="event.preventDefault();" onmouseover="$('.esconder1').slideToggle();">PRINCIPAL</a>
<div class="esconder1">
<a href="/f1-">Regras</a><br /> <a href="/f2-">Fichas de personagem</a><br /> <a href="/f5-">Anúncios</a><br /> <a href="/f6-">Apresentações e Despedidas</a><br />
</div>
<img style="width: 20px;height: 20px;" src="http://www.iconesbr.net/iconesbr/2009/02/7454/7454_64x64.png" /> <a href="">VILAS</a>
<div class="esconder2">
<a href="/f11-">Konoha</a><br /> <a href="/f12-">Kiri</a><br /> <a href="/f13-">Suna</a><br /> <a href="/f14-">Akatsuki</a><br /> <a href="/f16-">Refúgio Nukennin</a><br />
</div>
<img style="width: 20px;height: 20px;" src="http://www.iconesbr.net/iconesbr/2009/02/7450/7450_64x64.png" /><a href="">OFF ÁREA</a>
<div class="esconder3">
<a href=""></a><br /> <a href=""></a><br />
</div>
</div><style>.teste-e-sdanise a {
color: #BB2929 !important;
text-decoration: none !important;
}.esconder1, .esconder2, .esconder3{display: none !important;}
</style>
</div>
<style> /*Menagem igual IPB Para Forumeiros */
.guestMessage{
background: #f96e5b url("http://i56.servimg.com/u/f56/17/97/98/69/highli11.png") repeat-x 0 0;
border:1px solid #BB2929;color: black;line-height:180%;
margin-bottom:10px;padding:10px;
text-shadow: black 0px 1px 0px;
border-radius: 5px 5px 5px 5px;
}
.guestMessage a{
color: black !important;
text-decoration:none
}
.guestMessage .guestHeader{
background:#f96e5b;
background:-moz-linear-gradient(top, #f96e5b 0%, red 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #BB2929), color-stop(100%,red));
background:-webkit-linear-gradient(top, #BB2929 0%,red 100%);
background:-o-linear-gradient(top, #BB2929 0%,red 100%);
background:-ms-linear-gradient(top, #BB2929 0%,red 100%);
background:linear-gradient(top, #BB2929 0%,red 100%);
-webkit-box-shadow:inset black 0px 1px 4px, red 0px 1px 0px;
-moz-box-shadow:inset #b0720a 0px 1px 4px, red 0px 1px 0px;
box-shadow:inset red 0px 1px 4px, red 0px 1px 0px;
color: black;
text-shadow:rgba(255,255,255,0.4) 0px 1px 0px;padding:10px;
font-size:1.1em;
font-weight:bold;
margin:-2px -2px 15px -2px
}
.guestMessage a.guestButton{
background:rgb(240,175,81);
background:-moz-linear-gradient(top, rgba(240,175,81,1) 0%, rgba(245,197,114,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,175,81,1)), color-stop(100%,rgba(245,197,114,1)));
background:-webkit-linear-gradient(top, rgba(240,175,81,1) 0%,rgba(245,197,114,1) 100%);
background:-o-linear-gradient(top, rgba(240,175,81,1) 0%,rgba(245,197,114,1) 100%);
background:-ms-linear-gradient(top, rgba(240,175,81,1) 0%,rgba(245,197,114,1) 100%);
background:linear-gradient(top, rgba(240,175,81,1) 0%,rgba(245,197,114,1) 100%);
-webkit-box-shadow:inset #b0720a 0px 1px 4px, rgba(255,255,255,0.5) 0px 1px 0px;
-moz-box-shadow:inset #b0720a 0px 1px 4px, rgba(255,255,255,0.5) 0px 1px 0px;
box-shadow:inset #b0720a 0px 1px 4px, rgba(255,255,255,0.5) 0px 1px 0px;color:#9a6200;
text-shadow:rgba(255,255,255,0.4) 0px 1px 0px;
padding:0 14px;
display:inline-block;
height:36px;
line-height:36px;
outline:0;
margin:15px
8px 0 0;
font-weight:bold;
text-decoration:none
}
/*Mensaje para invitados IPB */</style>
Procurem por 'VILAS / PRINCIPAL / ÁREA OFF'
Em baixo dos respectivos nomes, tem links que estão dentro de uma div ocultados. Quero que ao clicar em cada link os que estão em baixo apareção com o slideToogle do javascript.
Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão:
PunBB
![[F]lames](https://i.imgur.com/GdQrbHZ.png)
