[Résolu] slideToggle (jQuery)

slideToggle (jQuery) [Résolu] - HTML/CSS - Programmation

Marsh Posté le 29-09-2016 à 13:15:53    

Salut,
je veux mettre en place un .slideToggle sur une balise <div> où je ne connais pas le nom à l'avance.
 
Dans mon fichier js j'ai ça :  
 
function afficher_masquer() {
   $(".test" ).slideToggle( 4000 );
}  
 
et dans mon fichier html  :
 
<h4 onClick="afficher_masque()">* Cliquez-moi *</h4>
<div class="test" style="display: none">
<img style="width: 350px" src="http://nsa38.casimages.com/img/2016/06/03/1606030351395451.png" />
</div>
 
En l'état actuel avec .test, ça fonctionne. Mais comment faire dans le cas où je veux appeler la fonction sur une autre classe que .test ?
Ca serait quelque chose comme <h4 onClick="afficher_masque('autre_class')">* Cliquez-moi *</h4>
Je ne sais pas comment adapter le code dans le fichier js.
Et là le problème c'est qu'avec .test, tous les éléments se déplient si il y en a plusieurs dans l'article.
Je ne veux rien de plus. Merci d'avance pour votre aide.  :jap:


Message édité par xaon le 29-09-2016 à 14:39:58
Reply

Marsh Posté le 29-09-2016 à 13:15:53   

Reply

Marsh Posté le 29-09-2016 à 14:14:38    

1) Il faut que chaque élément possède un id qui lui est propre
<div id="zone1" style="display: none">  
<div id="zone2" style="display: none">  
2) Tu dois modifier afficher_masquer pour lui passer en paramètre l'objet :
function afficher_masquer(cible) {
   $(cible).slideToggle( 4000 );
}  
3) tu définis ton onclick en conséquence :  
<h4 onClick="afficher_masque('#zone1')">* Cliquez-moi *</h4>  
Etc :o


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Marsh Posté le 29-09-2016 à 14:39:42    

Résolu :jap:  
 
function spoiler(id) {
   $('#'+id).slideToggle( 500 );
}  
 
Fonctionne impec.

Reply

Marsh Posté le 29-09-2016 à 14:43:31    

"De rien" :sarcastic:


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed