débutant, je n'arrive pas à cibler la division qui a la classe « description »
Bonjour à tous, je me lance dans le jquery afin d'ameliorer l'esthetique de mes sites.
Je suis débutant concernant le javascript donc désolé si ma question semble évidente mais je n'arrive pas à trouver de réponse !
Je m'exerce sur de l'affiche/masquage de contenu en cliquant sur des titres appropriés. Voici mon code HTML :
Code:
1
2
3
4
5
6
|
<DIV class="titre">Voici mon premier titre
<div class="description">
Il s'agit d'une description de la rubrique...
</div></DIV> |
Je fais également appel au début de ma page au fichier js qui me permet de parametrer l'animation. Voici l'idée :
Dans ma page web il n'apparait que les titres. Lorsqu'on clique sur un titre celui-ci change d'apparence et la description se dévoile (show)en dessous du titre. Lorsqu'on reclique sur ce titre la description disparait (hide) et la mise en forme du titre revient à l'originale.
Pour cela j'utilise le fichier js qui est codée de la façon suivante (mon problème est de couleur rouge) :
Code:
1
2
3
4
5
6
7
8
9
|
$('.titre').css({background:"#FFB"}).toggle(function() {
$(this).animate({width:200},{queue:false, duration:600, easing: 'easeOutBack'});
$(???????).hide("slow");
},function() {
$(this).animate({width:"90%"},{queue:false, duration:600, easing: 'easeOutBounce'});
$(???????).show("slow");
}) |
Mon soucis c'est que la mise en forme du titre se passe bien mais pas la description. Comme vous pouvez le voir dans mon code je n'arrive pas (ne sais pas) à cibler la DIV qui à pour class="description" pour qu'elle s'affiche/ se masque.
J'ai essayé en faisant
Code:
1
2
3
4
5
6
7
8
9
|
$('.titre').css({background:"#FFB"}).toggle(function() {
$(this).animate({width:200},{queue:false, duration:600, easing: 'easeOutBack'});
$('.description').hide("slow");
},function() {
$(this).animate({width:"90%"},{queue:false, duration:600, easing: 'easeOutBounce'});
$('.description').show("slow");
}) |
L'animation se passe comme je le souhaite mais le soucis c'est que c'est TOUTES les div class="description" qui se masquent et s'affichent en même temps.:cry:
ya t'il un moyen javascriptement parlant pour dire "uniquement la div class="description" qui se trouve dans le titre (this) actuel" ?
Merci d'avance;)
