Ascenseur javascript: fonctionne presque!
Bonjour,
Voila je suis en train de faire un système d'ascenseur en javascript avec jQuerry.
Donc pour l'instant ça marche mais pas exactement comme je veux. Je m'explique:
Avec une structure HTML telle que:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
<div class="Fond">
<div class="capture">
<img src="monimage.png" alt="Vignette" width="100" height="100" />
</div>
<div class="TitreBlocPli">
<h3 style="text-align:center">Mon titre </h3>
</div>
<div class="ResumeBlocPli">
Mon résumé
</div>
</div> <!-- referme le bloc fond -->
<a class="ascenseur">deplier</a>
<div class="BlocPli">
Mon texte qui se plie et déplie lorsque on clic sur le lien.
</div> |
et un Javascript tel que:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| jQuery().ready(function()
{
$(".ascenseur").next("div").hide();
$(".ascenseur").click(function(){
if($(this).next("div").is(":visible"))
{
$(this).next("div:visible").slideUp();
}
if($(this).next("div").is(":hidden"))
{
$(this).next("div").slideDown();
}
});
}); |
ça fonctionne bien sauf que le lien "deplier" est hors du bloc nommé "fond"
et moi je cherche à adapter le javascipt pour avoir le même fonctionnement avec le lien "déplier" dans le bloc nommé "fond"
c'est à dire un code HTML avec cette structure:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
<div class="Fond">
<div class="capture">
<img src="image.png" alt="Vignette alarme" width="100" height="100" />
</div>
<div class="TitreBlocPli">
<h3 style="text-align:center">mon titre</h3>
</div>
<div class="ResumeBlocPli">
Mon résumé
</div>
<a class="ascenseur">deplier</a>
</div> <!-- referme le bloc fond -->
<div class="BlocPli">
Mon texte qui se plie et déplie lorsque on clic sur le lien.
</div> |
merci!