Toggle, Accordeon

cpalocpalo Member

Bonjour
Sans utiliser Bootstrap comment faire une sorte de FAQ où les articles sont cachés et s'ouvrent en cliquant sur un titre avec effet toggle?

Réponses

  • Bonjour,

    Vite fait sous le coude :

    Voici un exemple de contenu pour page statique à adapter pour ta faq :

    <?php
    $faqs = array(
        array(
            'Escargot',
            'Le terme escargot est un nom vernaculaire qui en français désigne des gastéropodes à coquille, généralement terrestres et appelés aussi des limaçons, ou colimaçons par opposition aux limaces. '
             ),
        array(
            'Hérisson',
            'Hérisson est un nom vernaculaire qui désigne en français divers petits mammifères insectivores disposant de poils agglomérés, durs, hérissés et piquants. Ce nom dérive du latin ericius.'
        ),
        array(
            'Mulot',
            'Mulot est un nom vernaculaire ambigu.
    Pour les zoologistes, le terme mulot désigne spécifiquement le genre Apodemus.
    Cependant l\'usage1 désigne souvent sous cette appellation n\'importe quel rongeur campagnard, comme :
    Les campagnols, qui sont les premiers visés par l\'usage abusif du terme mulot.
    Le rat des moissons, qui ressemble beaucoup à une miniature de mulot.'
        ),
    );
    ?>
    <ul class="faq">
    <?php
    foreach($faqs as $i=>$faq) {
        $id = 'faq-' . $i;
    ?>
        <li>
            <input type="radio" name="faqs" id="<?= $id ?>" />
            <label for="<?= $id ?>"><?= $faq[0] ?></label>
            <div>
    <?= nl2br($faq[1]) ?>
            </div>
        </li>
    <?php
    }
    ?>
    </ul>
    

    Compléter la feuille de style du thème avec ces règles :

        .faq { list-style: none; }
        .faq [type="radio"] { display:none; }
        .faq label { font-size: 125%; font-weight: 600; }
        .faq [type="radio"]:not(:checked) + label + div { display: none; }
        .faq [type="radio"]:not(:checked) + label::after { content: '+'; padding-left: 1rem; }
        .faq > li > div { padding-left: 2rem; }
    

    Note que pour éviter de répéter la mise en forme, on stocke les couples question/réponse dans le tableau $faqs
    Plutôt que toggle, on parle dans la littérature de fold et unfold (plier / déplier)

    La mise en forme est ajustée avec les règles CSS dans le thème.
    S'il y a plusieurs pages de faqs, il vaut mieux déplacer la balise <ul> dans un template static-faq.php dans le thème.

    L'étape suivante pour améliorer est de stocker questions et réponses dans un fichier xml comme on le fait pour un flux RSS. Mais cela demande de créer un éditeur de faqs.

  • cpalocpalo Member

    Merci
    Cela me fait déjà un bon point de départ.

Connectez-vous ou Inscrivez-vous pour répondre.