11
AOUT

jQuery FAQs: Créez une FAQ simple mais efficace en HTML + jQuery

Publié le 11/08/09 à 07h32 par DJo

jQuery FAQ est un plugin jQuery permettant de créer une FAQ intuitive avec des effets de scroll Javascript bien réalisés.

jQuery FAQ

Ce plugin est présenté sous forme de tutorial où son développement est expliqué étape par étape.

Il permet de créer une FAQ simple mais très efficace avec des effets de scroll entre les questions et réponses bien faits.

Idéal si vous souhaitez créer une petite FAQ qui a un minimum de style.

Côté HTML, le code est épuré:

<ul id="questions">
    <li id="q1"><a href="#a1">Question 1?</a></li>
    <li id="q2"><a href="#a2">Question 2?</a></li>
    <li id="q3"><a href="#a3">Question 3?</a></li>
    <li id="q4"><a href="#a4">Question 4?</a></li>
    <li id="q5"><a href="#a4">Question 5?</a></li>
</ul>
<div id="a1">
    <h2>Question 1?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare feugiat diam sit amet semper. </p>
</div>
 
<div id="a2">
    <h2>Question 2?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum enim sem, in lacinia turpis. Ut dignissim posuere lectus et fermentum.</p>
</div>
 
<div id="a3">
    <h2>Question 3?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta, nunc a adipiscing scelerisque, leo ante iaculis nisl, eget molestie mi ipsum eget justo.</p>
</div>
 
<div id="a4">
    <h2>Question 4?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae elit eros, a luctus nisl. </p>
</div>
 
<div id="a5">
    <h2>Question 5?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec magna tellus, nec tempor metus. </p>
</div>

Le plugin permettra de faire automatiquement les transitions entre les liens, ajoutera des liens "Retour aux questions" etc.

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web