Créer une FAQ facile à mettre à jour en Javascript
Souhaitant implémenter une FAQ basique mais fonctionnelle sur un site, et n’ayant pas envie de réinventer la roue, j’ai cherché rapidement des codes tout faits, sans grand succès. Ce tutoriel (qui ne marchait pas chez moi) m’a donc inspiré et j’ai tout repris à zéro. Le résultat est relativement light (pas de librairie Ajax externe), malgré le workaround que j’ai dû trouver pour pallier la méthode setAttribute(“onclick”,”…”) qui ne marche pas sur IE7.
Le principe est simple, à chaque balise h4 correspond un seul et unique paragraphe p (pour sauter des lignes, utiliser <br />). Il suffit d’ajouter des couples (h4,p) à la balise “faqs” pour que le javascript s’occupe du côté dynamique. L’intérêt est de ne pas avoir à recourir à une base de données pour ajouter des entrées (peu pratique lorsque les personnes chargées de la maintenance ne savent pas en gérer une), ni à surcharger chaque entrée de la faq de balises spécifiques. Ajoutons enfin que c’est navigateurement correct puisque ça permet un affichage même si javascript est désactivé.
Une application du code suivant est visible ici ou là.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body><div style="margin: 5px 15px 0px 5px; text-align: justify;" id="faqs">
<h1 align="center">Questions fréquemment posées (FAQ)</h1>
<h3>Courage</h3>
<h4>&#9658; Pourquoi ne faut-il pas avoir peur ?</h4>
<p>La peur est l'ennemie du Bien.<br /><br />
Pour que le Bien vous accompagne dans votre vie, <a href="https://erwinmayer.com/kamashanti">faites un don</a>.
</p>
<br />
<h4>&#9658; Comment puis-je obtenir la rédemption ?</h4>
<p><a href="https://erwinmayer.com/kamashanti">Faites un don</a>. Remercier le Bien est la source de tout salut.</p>
<br />
<h4>&#9658; J'ai déjà donné, mais je n'ai pas l'impression que le Bien est avec moi, que puis-je faire ?</h4>
<p>Il ne faut pas perdre la foi ! Peut-être votre générosité n'est pas à la hauteur du Bien que vous attendez. <a href="https://erwinmayer.com/kamashanti">Ouvrez votre coeur</a>.</p>
<br />
<h4>&#9658; Je ne trouve pas réponse à ma question, que faire ?</h4>
<p><a href="https://erwinmayer.com/kamashanti">Donner !</a>. Les réponses sont transcendantes lorsque l'on est allégé des fardeaux de la vie.</p>
</div>
<br />
<br />
<center><a href="#" onClick="faq_toggle_all('block')"><small>Tout afficher</small></a> | <a href="#" onClick="faq_toggle_all('none')"><small>Tout masquer</small></a> </center>
</body>
<script type="text/javascript">
function faq_toggle(pdiv) {
var action = (pdiv.style.display == "block") ? "none" : "block";
pdiv.style.display = action;
}
function faq_toggle_all(action) {
var faqs = document.getElementById('faqs');
var pfaqs = faqs.getElementsByTagName('p');
for(i=0;i<pfaqs.length;i++) {
pfaqs[i].style.display=action;
}
}
var faqs = document.getElementById('faqs');
var pfaqs = faqs.getElementsByTagName('p');
var hfaqs = faqs.getElementsByTagName('h4');
for(i=0;i<pfaqs.length;i++) {
//hfaqs[i].setAttribute("onclick","faq_toggle(pfaqs["+i+"])"); // Does not work in IE.
hfaqs[i].onclick = function(){
var faqs = document.getElementById('faqs');
var pfaqs = faqs.getElementsByTagName('p');
var hfaqs = faqs.getElementsByTagName('h4');
for(j=0;j<hfaqs.length;j++) {
if(hfaqs[j] === this) {
faq_toggle(pfaqs[j]);
}
}
}
hfaqs[i].style.fontStyle="italic";
hfaqs[i].style.cursor="pointer";
hfaqs[i].style.color="#006699";
pfaqs[i].style.display="none";
}
</script>
</html>
7 comments
Merci pour l’astuce 😉
salut en plein ce que je cherche depuis plus de 2 heures lol merci bcp 🙂
Merci bq ça ma donnée une idée
Pour le onclick, voici un code standard qui est sensé fonctionner partout (j’ai juste testé Opera .. et Firefox petu-être aussi)
a.addEventListener(“click”, function(e){ whatever();javascript();youMay(“want”, here); }, false);
Bonjour,
Votre article est très utile.
J’aurais juste une question : comment faire en sorte que lorsque l’on clique pour déplier une question, que cette dernière aie le focus ?
J’entends par là que si l’on a une question qui se trouve en bas de page, au moment où l’on va cliquer, on ne verra pas la réponse, il va falloir “scroller” pour voir la réponse. Peut-on faire ça avec une fonction javascript ?
J’ai regardé du côté de la fonction “focus” mais sans succès.
Le plus simple serait de regarder du côté des ancres nommées.
Sinon, utiliser l’excellente librairie jQuery peut être pertinent (son usage permet en outre de simplifier le code ci-dessus).
Merci pour la mise à disposition de cette solution légère, élégante et extrêmement simple à mettre en oeuvre.
À noter qu’on peut conserver les réponses en multiples paragraphes, en les enveloppant dans un ‘div’ et modifiant le javascript en conséquence (utilisation de ‘div’ au lieu de ‘p’). On peut aussi évidemment utiliser un autre tag pour les questions (dans notre cas, on utilise ‘li’).