Tutoriel jQuery : une FAQ dynamique

Tutoriels jQuery

Voici le premier tutoriel d’une nouvelle rubrique du site : les Tutoriels jQuery ! Ce tutoriel jQuery inauguratif propose de rendre un peu plus sympathique une FAQ avec des effets d’animation de base. Le but étant aussi que le javascript agisse en surcouche et ne soit pas indispensable à sa bonne lecture.

Publié il y a déjà trop longtemps…

Mise en place du HTML

Pour commencer, il faut poser une structure HTML sur laquelle on travaillera en jQuery. Pour ce tutoriel, j’ai donc opté pour une liste de définition avec les balises <dl>, <dt> et <dd>.

Ainsi, voici un exemple de structure :

<dl>
	<dt>Question 1</dt>
	<dd>&hellip;R&eacute;ponse&hellip;</dd>
	<dt>Question 2</dt>
	<dd>&hellip;R&eacute;ponse&hellip;</dd>
	<dt>Question 3</dt>
	<dd>&hellip;R&eacute;ponse&hellip;</dd>
</dl>

Ce qui donne :

Question 1: …Réponse…
Question 2: …Réponse…
Question 3: …Réponse…

Mise en place du javascript

Il faut lier la bibliothèque jQuery et mettre en place la fonction des actions que l’on va faire en jQuery. Pour l’exemple, j’ai choisi de lier la bibliothèque jQuery hébergée par Google. Idéalement, il faudrait aussi placer le code jQuery que vous allez créer dans un fichier javascript externe.

Placez l’appel des scripts entre les balises <head> de votre page HTML.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Actions à définir
});
</script>

Actions au chargement de la page

Lorsque le javascript est activé sur votre navigateur, nous allons cacher toutes les réponses (<dd>) de la liste de définition (<dl>) pour par la suite les afficher au click sur la question (<dt>).

Nous sélectionnons donc toutes les réponses ($("<dd>")) et nous les cachons (fonction hide()).

<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Masquage des réponses
	$("dd").hide();
});
</script>

En outre, pour indiquer à l’utilisateur que les questions sont cliquables, nous allons appliquer un peu de CSS en jQuery. Nous mettons donc un curseur de pointeur sur les questions (<dt>).

<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Masquage des réponses
	$("dd").hide();
	// CSS : curseur pointeur
	$("dt").css("cursor", "pointer");
});
</script>

Ce qui donne :

Question 1: …Réponse…
Question 2: …Réponse…
Question 3: …Réponse…

Actions suite aux événements

Action de base

Dans notre exemple, l’événement sera le clic sur la question qui aura pour effet d’afficher (fonction show()) la question (<dt>) correspondante c’est-à-dire le nœud suivant (fonction next()).

<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Masquage des réponses
	$("dd").hide();
	// CSS : curseur pointeur
	$("dt").css("cursor", "pointer");
	// Clic sur la question
	$("dt").click(function() {
		// Affichage de la réponse placée juste après dans le code HTML
		$(this).next().show();
	});
});
</script>

Ce qui donne :

Question 1: …Réponse…
Question 2: …Réponse…
Question 3: …Réponse…

Un mécanisme viable

Dans l’étape précédente, l’ouverture fonctionne bien mais vous lorsque vous cliquez sur une autre question, les autres réponses ne se referment pas. Il faut donc qu’au clic sur une question, nous indiquions que toutes les réponses se ferment avant d’ouvrir la réponse que nous souhaitons afficher.

Au passage, nous allons changer l’effet d’animation de base (show() et hide()) pour celui du volet (slideUp() et slideDown()).

Ce qui donne :

<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Masquage des réponses
	$("dd").hide();
	// CSS : curseur pointeur
	$("dt").css("cursor", "pointer");
	// Clic sur la question
	$("dt").click(function() {
		// Masquage des réponses
		$("dd").slideUp();
		// Affichage de la réponse placée juste après dans le code HTML
		$(this).next().slideDown();
	});
});
</script>

Ce qui donne :

Question 1: …Réponse…
Question 2: …Réponse…
Question 3: …Réponse…

Éviter les effets indésirables

Dans l’étape précédente, les ouvertures et les fermetures fonctionnent mais lorsque l’on clique 2 fois sur la même question, la réponse correspondante s’ouvre et se referme.

Pour terminer, ce tutotriel jQuery nous allons empêcher cet effet en testant si la réponse est déjà ouverte (:visible et :hidden).

Ce qui donne :

<script type="text/javascript">
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Masquage des réponses
	$("dd").hide();
	// CSS : curseur pointeur
	$("dt").css("cursor", "pointer");
	// Clic sur la question
	$("dt").click(function() {
		// Actions uniquement si la réponse n'est pas déjà visible
		if($(this).next().is(":visible") == false) {
			// Masquage des réponses
			$("dd").slideUp();
			// Affichage de la réponse placée juste après dans le code HTML
			$(this).next().slideDown();
		}
	});
});
</script>

Ce qui donne :

Question 1: …Réponse…
Question 2: …Réponse…
Question 3: …Réponse…

Et voilà !

Voir le tutoriel terminé

J’espère que ce premier tutoriel jQuery très simple vous a plu !

Qu’en pensez-vous ? Quels prochains tutoriels aimeriez-vous voir ?

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

christophe

comme toujours un tutoriel très didactique qui donne envie de s’y mettre immédiatement !
Gabriel

Très sympa et surtout très simple et accessible ce petit tuto.
Par contre il y a une petite erreur dans ton code, le 2ème commentaire est // Masquage des réponses et non des questions sinon ça devient jéopardy dans la FAQ

Shemu

Merci pour la correction !
Promis, au prochain tutoriel jQuery, j’arrête de faire mon Philippe Risoli !

Choco L.I

Comme christophe sa donne envies de s’y mettre! !!!
Dr_snake

Salut,

plutôt sympa mais le plugin accordion de jquery UI aurait suffit :p

Je dis ça car je suis en plein jquery pour le moment et je viens justement de réaliser un menu avec accordion :p

Shemu

Tout à fait, mais le but de se tutoriel est principalement de comprendre le fonctionnement et d’apprendre à le faire sans plugin.

themaster

merci beaucoup, c’est très jolie ce effet, merci encore pour ton formidable travaille
webchrea

Merci beaucoup juste en suivant ce cours je vient de comprendre le fonctionnement du pluqing jquery ça vient de m’aider merci encor
lodemars

Merci pour ce joli tuto!
Une question pour compliquer le truc. Je voudrais l’appliquer à une <table>. Au lieu de cacher les <dd>, je vais donc cacher les <td> mais… pas tous évidemment. Une ligne sur deux. Comment faire?

Shemu

Tu peux essayer avec les pseudo-classes « odd » et « even ».

Jasse29

Très intéressant ces tutoriels… Cela donne envie d’approfondir le sujet.
Franck

Merci pour le tuto :)
Je commence à mieux comprendre pourquoi quand les serveurs google partent en vrillent la moitié des sites partent avec
Tomo

Super tuto !!!
Par contre, j’aurais voulu savoir si c’est possible de mettre les dt en bold quand leur dd est déroulé et qu’il se remette en normal lorsqu’il est caché.
Merci.
war_k

Genial ! Très bon tuto. J’aimerai cependant construire la boucle pour que quand on reclick sur un élément ouvert celui ci se referme et je commence avec Jquery. J’ai un peu de mal avec les boucles et les else. J’ai essailler avec plusieurs if mais rien n’y fait, le menu part dans tout les sens. Que rajouter dans cet exemple pour faire en sorte que l’élément se referme au click quand il est ouvert svp ?
Encore merci pour ce super tuto

Shemu

Il suffit de rajouter un else { $(this).next().slideUp(); };

NewDev

Je viens tout juste de m’intéresser jquery et ce tuto fait très envie comparé à d’autres. Je reprend ce qui été dit:"comme toujours un tutoriel très didactique qui donne envie de s’y mettre immédiatement !" C tout a fait ca !
Si t’en as d’autres j’suis tout a fait preneur
Merci !

Les commentaires sont clos.