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. Sed ille, ut dixi, vitiose. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Duo Reges: constructio interrete. Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat.

    Te enim iudicem aequum puto, modo quae dicat ille bene noris. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Ita redarguitur ipse a sese, convincunturque scripta eius probitate ipsius ac moribus. Et ille ridens: Video, inquit, quid agas; Ut non sine causa ex iis memoriae ducta sit disciplina. Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Potius inflammat, ut coercendi magis quam dedocendi esse videantur.

    At iam decimum annum in spelunca iacet. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. At ille pellit, qui permulcet sensum voluptate. Nam de isto magna dissensio est.

    Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Ut optime, secundum naturam affectum esse possit. Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Si verbum sequimur, primum longius verbum praepositum quam bonum. Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? Facile est hoc cernere in primis puerorum aetatulis. Quasi ego id curem, quid ille aiat aut neget. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Sin laboramus, quis est, qui alienae modum statuat industriae?

    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. Indicant pueri, in quibus ut in speculis natura cernitur. Quid iudicant sensus? Ita enim vivunt quidam, ut eorum vita refellatur oratio. Duo Reges: constructio interrete. Ea possunt paria non esse. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Nihil minus, contraque illa hereditate dives ob eamque rem laetus.

    Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Qui enim existimabit posse se miserum esse beatus non erit. Deinde disputat, quod cuiusque generis animantium statui deceat extremum.

    Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; At multis se probavit. Quae cum magnifice primo dici viderentur, considerata minus probabantur. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Ne amores quidem sanctos a sapiente alienos esse arbitrantur.

    Quare attende, quaeso. Hoc non est positum in nostra actione. Idemque diviserunt naturam hominis in animum et corpus. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Bonum incolumis acies: misera caecitas. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus;

    {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