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. Qua tu etiam inprudens utebare non numquam. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Cum sciret confestim esse moriendum eamque mortem ardentiore studio peteret, quam Epicurus voluptatem petendam putat. Innumerabilia dici possunt in hanc sententiam, sed non necesse est. Quam si explicavisset, non tam haesitaret. Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego. Theophrasti igitur, inquit, tibi liber ille placet de beata vita?

    In motu et in statu corporis nihil inest, quod animadvertendum esse ipsa natura iudicet? Quid est, quod ab ea absolvi et perfici debeat? Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Non est enim vitium in oratione solum, sed etiam in moribus. Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Quo modo autem philosophus loquitur?

    Cur iustitia laudatur? Sed haec omittamus; Tu enim ista lenius, hic Stoicorum more nos vexat. Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Ergo hoc quidem apparet, nos ad agendum esse natos. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? Nemo nostrum istius generis asotos iucunde putat vivere. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam.

    Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Quam nemo umquam voluptatem appellavit, appellat; Conferam tecum, quam cuique verso rem subicias; Minime vero istorum quidem, inquit.

    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. Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Nos quidem Virtutes sic natae sumus, ut tibi serviremus, aliud negotii nihil habemus. Duo Reges: constructio interrete. Non enim ipsa genuit hominem, sed accepit a natura inchoatum. Ratio enim nostra consentit, pugnat oratio. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Quid ait Aristoteles reliquique Platonis alumni? Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. Eademne, quae restincta siti? Ut aliquid scire se gaudeant? Quod non faceret, si in voluptate summum bonum poneret.

    Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Quis non odit sordidos, vanos, leves, futtiles? In contemplatione et cognitione posita rerum, quae quia deorum erat vitae simillima, sapiente visa est dignissima. An hoc usque quaque, aliter in vita? Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Ego vero volo in virtute vim esse quam maximam; Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Ergo illi intellegunt quid Epicurus dicat, ego non intellego?

    Cum sciret confestim esse moriendum eamque mortem ardentiore studio peteret, quam Epicurus voluptatem petendam putat. Consequentia exquirere, quoad sit id, quod volumus, effectum. Poterat autem inpune; Ut pulsi recurrant? Quid turpius quam sapientis vitam ex insipientium sermone pendere? A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas. Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Ergo et avarus erit, sed finite, et adulter, verum habebit modum, et luxuriosus eodem modo. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.

    Nunc vides, quid faciat. At certe gravius. Si quidem, inquit, tollerem, sed relinquo. Quasi ego id curem, quid ille aiat aut neget. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Facillimum id quidem est, inquam. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Istic sum, inquit. Aliter homines, aliter philosophos loqui putas oportere?

    {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

    Cette action, très utilisée par UP, est simple et très légère.
    Si vous avez besoin de plus de fonctionnalités, regardez du coté de l'action tab qui propose également un accordion avec plus d'options