Jquery et effet slide

Bonjour,

j’ai une question relative à la bibliothèque Jquery et plus précisément sur le javascript.

Je souhaite appliquer sur une page internet un effet, par exemple slidedown/up. Le problème qui se pose et que je souhaite appliquer l’effet à 2 liens et sans à avoir « dupliquer » le code javascript. Je m’explique :

Imaginons ce code html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <head> <script src="jquery.js" type="text/javascript"></script> <script src=" fonctions_jquery.js" type="text/javascript"></script> <script src="effets_jquery.js" type="text/javascript"></script> </head> <body> <p><a href="#" class="lien-test">Liens</a></p> <div id="lien" style="display: none;"> - <a href="http://exempledelien1.com" target="_blank">exemple1</a><br /> - <a href="http://exempledelien2.com" target="_blank">exemple2</a>div> <p>blablablalbalbalbalba<br /> blablablablabla</p> <p><a href="#" class="video-test">Video</a></p> <div id="video" style="display: none;"> - <a href="http://exempledelien3.com" target="_blank">exemple3</a><br /> - <a href="http://exempledelien4.com" target="_blank">exemple4</a>div> </body>
Maintenant voici le code javascript qui se trouve dans « effets_jquery.js » :
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function(){ $(".lien-test").click(function(){ $("#lien").slideToggle("normal"); $(this).toggleClass("active"); return false; }); $(".video-test").click(function(){ $("#video").slideToggle("normal"); $(this).toggleClass("active"); return false; }); });
Ma question est comment puis-je avoir une seule fonction qui sera utilisable plus facilement sans avoir à ajouter le même code dans le fichier « effects_jquery.js » si je souhaite attribuer cet effet à un nouveau lien/objet ?
Je pense qu’il faut inclure dans le code html et dans la balise des liens un truc de ce genre <a onclick="Effect.toggle….. > mais je bute :(

Merci de tout aide.

Bonsoir.

Code:

1
2
3
4
5
6
7
8
9
10
 
// si la structure de votre fichier est toujours la même
// un lien avec une class "xyz-test" dans un paragraphe
// paragraphe suivit d'une division
// alors on peut faire :
$("a[class$='-test']").click(function(){
	$(this).parent().next("div").slideToggle("normal");
	$(this).toggleClass("active");
	return false;
});

Citation:

Envoyé par danielhagnoul

Bonsoir.

Code:

1
2
3
4
5
6
7
8
9
10
 
// si la structure de votre fichier est toujours la même
// un lien avec une class "xyz-test" dans un paragraphe
// paragraphe suivit d'une division
// alors on peut faire :
$("a[class$='-test']").click(function(){
	$(this).parent().next("div").slideToggle("normal");
	$(this).toggleClass("active");
	return false;
});

Merci beaucoup, ça fonctionne au poil.