Créer une FAQ

Invité · 04/07/2013, 10h41

Salut tout le monde,

J'ai un site web et j'aimerais y mettre une FAQ. J'ai une base de données, et dans ma partie administration je peux ajouter/supprimer une FAQ.

J'aimerais avoir quelque chose dans ce style :

Produits > thème > question > réponse

Exemple :

Winrar

-> Extraction

---> Comment extraire ?

---> Durée ?

-> Installation

---> Durée ?

---> Quelle version ?

Photoshop

-> filtre

---> Comment les utiliser ?

---> Où sont-ils ?

Ici "Winrar" et "Photoshop" sont les produits, "Extraction", "Installation" et "Filtre" sont les thèmes.

Le reste sont les questions.

Ce que j'aimerais c'est que de base tout est caché sauf les produits. Quand je clique sur un des produits, la liste des thèmes apparaît, et quand je choisis un thème les questions s'affichent et quand je clique sur une question la réponse s'affiche.

Je précise que les produits, thèmes, questions et réponses sont dans une table de ma bd et je les appelle grâce à des requêtes.

Pour l'instant j'ai fait ça :

Fichier faq.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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">
    <head>
        <title>FAQ</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="style.css"/>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="effet.js"></script>
    </head>
 
 
    <body>
 
        <header>
            <img src="logo.png" alt="Logo" id="logo" />
        </header>
        <div class="menu">
            <ul class="liste">
                <li><a href="http://www..fr/produits"> Produits </a></li>
                <li><a href="http://www..fr/prestations"> Formations </a></li>
                <li><a href="http://www..com/FR/support.html"> Assistance </a></li>
                <li><a href="http://www..fr/Evenements"> Partenaires </a></li>
                <li><a href="http://www..com/FR/faq.php"> FAQs </a></li>
                <li><a href="http://www..fr/Optimaudit"> Contactez-nous </a></li>
            </ul>
        </div>
 
 
 
        <ul id="paragraphe" style="list-style:none;margin:0 auto;padding:0;width:500px;">
            <?php
                $db = mysql_connect('fldc315.serveursdns.net', '', '')  or die('Erreur de connexion '.mysql_error());
                mysql_select_db('',$db)  or die('Erreur de selection '.mysql_error());
                mysql_query("SET NAMES UTF8");
 
                $sqlReq = mysql_query('SELECT DISTINCT(product) FROM faq');
                while ($data = mysql_fetch_array($sqlReq)){
            ?>
            <li style="position:relative; cursor:pointer">
                <span style="position:absolute;right:5px">+</span>
                <h3><?php echo nl2br($data['product']); ?></h3>
            <!-- <p style="display:none">blabla</p>-->
 
                <?php
                    $sql = mysql_query("SELECT theme FROM faq WHERE product='".$data['product']."'");
                    while ($data = mysql_fetch_array($sql)){
                ?>
 
                    <p style="display:none"><?php echo nl2br($data['theme']); ?></p>
 
                <?php } ?>
 
 
 
 
            </li>
            <?php }  ?>
        </ul>
 
 
 
 
 
        <footer>
            <div class="footer"><hr><a style="font-size:.7em" href="http://www..com/FR/admin.php">Administrateur</a></div>
        </footer>
    </body>
</html>

Fichier effet.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function ()  {
 
    $('#paragraphe li').click(function(){
 
        var text = $(this).children('p');
 
        if (text.is(':hidden')){
            text.slideDown('500');
            $(this).children('span').html('-');
        }
 
        else  {
            text.slideUp('300');
            $(this).children('span').html('+');
        } 
    });
});

Malheureusement je bloque un peu. Pour l'instant tous les thèmes apparaissent mais je vois pas comment faire pour cliquer sur ces thèmes pour faire apparaitre les questions.

Avez vous des idées ? Merci d'avance d'avoir tout lu

**Carhiboux** · 04/07/2013, 16h27

C'est là qu'AJAX rentre en scène normalement, non?

Pour chaque catégorie, tu peux faire une requête ajax qui te renvoie les sous-catégories que tu viens ajouter dynamiquement à ta page.

Créer une FAQ

jQuery

Vue hybride

Discussions similaires

Partager

Partager