faq ~ accordions

Un accordion très facile à mettre en oeuvre
C'est celui qu'utilise UP pour sa documentation auto-générée'

➠ faq : accordion très simple

Cliquer pour lire la documentation

syntaxe : une alternance de titres pour les onglet en H4 et de contenu HTML
{up faq}
-- titre en H4
-- contenu HTML
{/up faq}
author lomart version v1.0 - 15/07/2017 license GNU/GPLv3 credit ryans temkoski
  • faq: rien
  • title-tag=h4: pour utiliser une autre balise pour les titres
  • title-class: classe pour le titre (onglet)
  • title-style: style inline pour le titre
  • title-icon: TODO
  • content-class: classe pour le contenu
  • content-style: style inline pour le contenu

    L'action FAQ est un accordion très simple : un clic pour ouvrir, un clic pour fermer, pas d'indicateur de l'état.

    Les texte en h4 sont les titres et tout le code jusqu'au prochain h4 est le contenu de l'onglet

    question n°1

    texte pour la question n°1

    question n°2

    texte pour la question n°2 mais un peu plus long

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Si longus, levis. Et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Quod si ita se habeat, non possit beatam praestare vitam sapientia. An me, inquis, tam amentem putas, ut apud imperitos isto modo loquar? Illi enim inter se dissentiunt. Duo Reges: constructio interrete.

    question n°3

    texte pour la question n°3

    question n°4

    texte pour la question n°4

    Le code pour l'exemple ci-dessus

    {up faq}
    <h4>{up icon=help | size=20px | color=red} question n°1</h4>
      <p>texte pour la question n°1</p>
      <img src="images/image.jpg">
    <h4>{up icon=plus} question n°2</h4>
      <p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
    <h4>question n°3</h4>
      <p>texte pour la question n°3</p>
    <h4>question n°4</h4>
      <p>texte pour la question n°4</p>
    {/up faq}

    Un autre en utilisant les options. Il n'est pas prévu de cibler chaque élément séparement.

    question n°1

    un sous titre en h4

    texte pour la question n°1

    question n°2

    texte pour la question n°2 mais un peu plus long

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod ea non occurrentia fingunt, vincunt Aristonem; Quia dolori non voluptas contraria est, sed doloris privatio. Ut id aliis narrare gestiant?

    {up faq | title-tag=h3 | title-class=bg-vertFonce t-jaune bg-hover-vert| content-class=bd-vertFonce bt0  bg-jauneClair}
    <h3>question n°1</h3>
      <p>texte pour la question n°1</p>
    <h3>question n°2</h3>
      <p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
    {/up faq}

    Quelques explications:

    title-tag=h3
    Normalement les textes dans une balise h4 contiennent les titres. Ici, on préfère h3, car un onglet contient un h4.
    title-class
    Pour le titre, texte jaune ( t-jaune) et fond vert foncé sauf lors survol en vert (bg-vertFonce bg-hover-vert)
    content-class
    bordure verte sauf sur le coté top (bd-vertFonce bt0) et fond jaune paille (bg-jauneClair)

    Personnaliser le(s) titre(s) des contenus visibles

    A partir de la version 1.33, le bloc div des titres ouverts ont la classe active

    Cela permet d'ajouter un style CSS. Sur l'exemple précédent avec des titres sur fond vert, nous allons mettre le texte en rouge

    {up addcsshead=.bg-vertFonce.upfaq-button.active[color:red !important]}
    

    Pour cibler l'élément, nous utilisons le sélecteur .upfaq-button.active associé à la classe .bg-vertFonce qui est spécifique à cet accordion