Tutoriel jQuery : une FAQ dynamique

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 :