Tutoriel : créez une FAQ accessible et facile à mettre à jour avec JQuery

A l'heure de mettre en ligne une FAQ qui devra être mise à jour par un néophyte, je me suis posé la question suivante : comment concilier la souplesse de mise à jour avec le dynamisme de javascript ? Simple : créer le HTML d'abord, et laisser JQuery animer le tout.

Lorsqu'un site doit être mis à jour par un animateur de contenus dépourvu de compétences techniques en HTML ou Javascript, le développeur a généralement deux alternatives :

• limiter les possibilités d'édition au strict minimum : pas d'effets, pas de pages dynamiques ; l'animateur va tout péter et appeler au secours après dix minutes d'utilisation. Résultat : en dehors des fonctionnalités techniques pointues, les pages éditables sont tristounes et statiques.
• créer des outils d'édition sur mesure : interfaces de gestion de contenus, tables de bases de données bien structurées, plugins super élaborés, le tout en langage serveur (PHP, ASP, Ruby...) ; ainsi on s'assure par divers garde-fous que les données sont au format voulu. Le site gagne en dynamisme, mais en contrepartie d'une complexité accrue, tant côté développement qu'administration.

A l'heure de mettre en ligne une FAQ (Foire aux questions), je me suis posé la question suivante : comment concilier la souplesse de mise à jour avec le dynamisme de javascript ? Pour rappel, le fonctionnement classique d'une FAQ est le suivant : une liste de questions rangées par thème, un clic sur la question affichant immédiatement la réponse associée.

Je me suis donc mis en tête d'utiliser la puissance de JQuery et des sélecteurs pour réaliser ce travail. Voici comment procéder, en

1. Créer les balises

Partons d'une structure de pages simple, aisément déclinable : un titre principal (h1), des sections (h2), des questions (h3) et enfin des réponses (p). Il s'agit d'un code facile à produire et à éditer dans un éditeur Wysiwig (ex. TinyMCE). Nous n'allons pas créer une page HTML complète, puisque cette FAQ sera mise à jour par l'animateur de contenus. Le code pourra donc ressembler à ça :

<h1>FAQ de l'administrateur</h1>
<h2>Section 1 : Connexion</h2>

<h3>Comment puis-je m'inscrire ?</h3>
<p>L'inscription est gratuite et ouverte à tout le monde. Cliquez sur le lien "inscription" présent à droite du logo.</p>

<h3>Je suis inscrit, mais le site ne me reconnaît pas. Comment faire ?</h3>
<p>Cliquez sur "connexion" puis saisissez l'adresse e-mail ainsi que le mot de passe saisis lors de votre inscription. </p>

<h2>Section 2 : Publication</h2>

<h3>Comment publier un article</h3>
<p>Après vous être connecté, vous pourrez immédiatement proposer un article en cliquant sur "publier un article" dans le menu de gauche. Votre article sera relu par notre comité de rédaction qui décidera de le publier ou non.</p>

2. Un peu de mouvement avec jquery

Nous souhaitons maintenant que ce texte se comporte comme une FAQ. Nous voulons donc pour chaque question :

• masquer/replier la réponse associée au chargement de la page
• afficher la question comme un lien (par ex. bleu, souligné, avec un curseur en forme de pointeur)
• lors d'un clic sur la question, basculer l'état du paragraphe qui suit : visible s'il était masqué, masqué s'il était visible.

JQuery rend cette manipulation extrèmement aisée. Voici le code nécessaire :

// On inclut le source JQuery (en head)
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>

<script type="text/javascript">
// On lance la boucle sur tous les H3
$('h3').each(function() {
    // On masque le paragraphe qui suit
    $(this).next('p').hide();
    // On copie le style des balises A
    var couleurLien = $('a').css("color");
    $(this).css({"text-decoration" : "underline", "color" : couleurLien, "cursor":"pointer"});
    // A chaque clic, on bascule l'état de l'élément P suivant
    $(this).click(function() {
        $(this).next('p').toggle();
    });
});
</script>

Et voilà ! Votre FAQ s'anime et réagit à chacun des clics. Il reste à choisir d'inclure le code en intégralité, ou le lier sous forme externe dans une balise SCRIPT directement à la fin du code source éditable (avec le risque que l'utilisateur l'efface) ou de le charger sur toutes les pages de votre site, en le déclenchant uniquement lorsqu'une condition est remplie (par exemple en fonction de l'url, ou encore en détectant la présence d'un ID d'élément particulier).

Attention cependant : la réponse à chaque question ne doit comporter qu'un seul paragraphe. Les éventuels sauts de ligne auront la forme de balises BR exclusivement.

Démonstration

àéà

î

èêééééé

ééé

éééééâéééééééé