Sondage du mois

Sondage du mois
 

  La connaissance ne vaut que si elle est partagée par tous




 
  Astuce Adobe Photoshop : Raccourci outil Recadrage : Touche C




Les tutoriaux: Index » Jquery » ScriptsJquery » Accordéon avec slideToggle

Introduction

  • Tutoriel posté par Sky
  • 1667 lectures
  • Mis en ligne le 17-09-2010
  • Dernière mise à jour le 17-09-2010
  • Ce tutoriel a été estimé comme simple.


Automatic Translations:
Translate Into English Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Nous allons voir ici un moyen de créer un accordéon en quelques lignes de code avec slideToggle.
Cette fonction est très intéressante car elle gère sa position elle même.
Si l'élément est caché il l'affichera et inversement. Ce qui nous permet de multiples possibilités en quelques ligne toutes simples.




Méthodologie

Un peu de code pour commencer



Nous allons créer quatre blocs comme ci-dessous

CODE HTML


Titre numéro 1


Contenu de mon bloc



Titre numéro 2




Titre numéro 3




Titre numéro 4



Avec le code ci-dessus seules le bloc ayant pour id "one" sera visible, tous les autres seront caché avec un display:none;.
Avec du CSS nous pouvons designer un petit peu tout ça, deux classes CSS pour designer les blocs de titre (#b1, #b2, #b3 et #b4 ) et les blocs de contenu (#one, #two, #three, #four ).

CODE CSS


#b1, #b2, #b3, #b4 
{
padding:5px;
width:400px;
height:15px;
border:1px #000 solid;
background-color:#fff;
cursor:pointer;
} 

#one, #two, #three, #four 
{
padding:5px;
width:400px;
border:1px #000 solid;
background-color:#000;
cursor:pointer;
color:#fff;
}



A ce stade la vous devriez obtenir quelques chose comme ça :



Nous pouvons passer à la partir jQuery

CODE JAVASCRIPT


    
    $("#b1").click(function () {
      $("#one").slideToggle("fast");
    });
    $("#b2").click(function () {
      $("#two").slideToggle("fast");
    });
	$("#b3").click(function () {
      $("#three").slideToggle("fast");
    });
	$("#b4").click(function () {
      $("#four").slideToggle("fast");
    });



Prenons la première partie :

CODE JAVASCRIPT


    
    $("#b1").click(function () {
      $("#one").slideToggle("fast");
    });



Lorsque je clique sur l'élément ayant comme id "#b1" je lance slideToggle sur l'élément ayant pour id "#one".
Avec cette méthode vous pouvez créer facilement un menu en haut de votre site en position fixed par exemple.

Vous pouvez voir en cliquant ici un exemple de menu avec slideToggle.

Allons un peu plus loin



slideToggle nous laisse la possibilité de faire un callback, c'est à dire qu'une action peux être effectuer lorsque le slide est terminé, cela nous donne de multiples possibilités. voyons un exemple :

CODE JAVASCRIPT


$('#b1').click(function() {
$('#one').slideToggle('fast', function() {
	alert('L'animation est finie');
});
});



Tester votre slide, vous constatez qu'une fois l'animation terminée une popup s'ouvre avec le message "L'animation est finie". (Tester directement ici)

Maintenant essayez donc avec le code suivant :) Cliquez ici pour voir le résultat

CODE JAVASCRIPT


$('#b1').click(function() 
{

$('#one').slideToggle('slow', function() 
{	$('#two').slideToggle('slow', function() 
	{ 	$('#three').slideToggle('slow', function() 
		{	$('#four').slideToggle('slow', function() 
			{	$('#one').slideToggle('slow');
				$('#two').slideToggle('slow');
				$('#three').slideToggle('slow');
				$('#four').slideToggle('slow');
			}); 
		});
	}); 
});
  
});



Notes

  Evaluez le tutorial (0 Votes)

0
0
0

Pour les questions ou d'éventuelles remarques, dirigez vous vers le forum.

Réagir sur ce tutoriel - [Jquery] Accordéon avec slideToggle

DERNIÈRES PUBLICATIONS DE OPEN-MOUTHED

En direct de open-mouthed.com