Download WordPress Themes, Happy Birthday Wishes

jQuery toggle()

La méthode toggle() de jQuery est un type de méthode spécial qui permet de basculer entre les méthodes hide() et show(). Il montre les éléments cachés et cache l’élément montré.

Syntaxe:

$(selector).toggle();  
$(selector).toggle(speed, callback);  
$(selector).toggle(speed, easing, callback);  
$(selector).toggle(display);
  • speed: C’est un paramètre optionnel. Il spécifie la vitesse du délai. Ses valeurs possibles sont lentes, rapides et en millisecondes.
  • easing: spécifie la fonction d’accélération à utiliser pour la transition.
  • callback: c’est aussi un paramètre optionnel. Il spécifie la fonction à appeler après l’achèvement de l’effet toggle ().
  • display: Si true, il affiche l’élément. Si la valeur est false, l’élément est masqué.

Prenons un exemple pour voir l’effet toggle() de jQuery.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("div.d1").toggle();  
    });  
});  
</script>  
</head>  
<body>  
<button>Basculer</button>  
<div class="d1" style="border:1px solid black;padding:10px;width:250px">  
<p><b>Titre </b><br/>    
Bonjour<br/>    
w3tutoriels.com<br/>    
site de programmation<br/>    
et d apprentissage<br/>    
</p>   
</div>  
</body>  
</html>  

Résultat :

jquery-toggle

Effet de toggle() avec paramètre de vitesse

Voyons l’exemple de l’effet de toggle() de jQuery avec une vitesse de 1500 millisecondes.

$(document).ready(function(){  
     $("button").click(function(){  
        $("div.d1").toggle(1500);  
    });  
});