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 UP-1.0 - 15/07/2017 license GNU/GPLv3 credit ryans temkoski tags layout-dynamic
  • 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
  • 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. Cave putes quicquam esse verius. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Illi enim inter se dissentiunt. Cur igitur, cum de re conveniat, non malumus usitate loqui? Vulgo enim dicitur: Iucundi acti labores, nec male Euripidesconcludam, si potero, Latine; Duo Reges: constructio interrete. Invidiosum nomen est, infame, suspectum.

    Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Apud ceteros autem philosophos, qui quaesivit aliquid, tacet; Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Nonne igitur tibi videntur, inquit, mala? Mihi enim erit isdem istis fortasse iam utendum. Huius ego nunc auctoritatem sequens idem faciam. Bonum incolumis acies: misera caecitas. Quae animi affectio suum cuique tribuens atque hanc, quam dico.

    Mihi quidem Antiochum, quem audis, satis belle videris attendere. Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus tamque multae. Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Hunc vos beatum; In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Nunc agendum est subtilius. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. In quo etsi est magnus, tamen nova pleraque et perpauca de moribus. An est aliquid, quod te sua sponte delectet? Primum in nostrane potestate est, quid meminerimus?

    Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus? Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Consequentia exquirere, quoad sit id, quod volumus, effectum. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quae quidem sapientes sequuntur duce natura tamquam videntes; Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Hoc enim constituto in philosophia constituta sunt omnia.

    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. Hanc ergo intuens debet institutum illud quasi signum absolvere. Quod iam a me expectare noli. Quo studio Aristophanem putamus aetatem in litteris duxisse? Putabam equidem satis, inquit, me dixisse. Eadem nunc mea adversum te oratio est. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus;

    Beatus sibi videtur esse moriens. Oratio me istius philosophi non offendit; Tu enim ista lenius, hic Stoicorum more nos vexat.

    Nec vero pietas adversus deos nec quanta iis gratia debeatur sine explicatione naturae intellegi potest. Duo Reges: constructio interrete. Id mihi magnum videtur. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Nec vero pietas adversus deos nec quanta iis gratia debeatur sine explicatione naturae intellegi potest. Longum est enim ad omnia respondere, quae a te dicta sunt. At iam decimum annum in spelunca iacet. Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. Satis est ad hoc responsum.

    Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Ut in geometria, prima si dederis, danda sunt omnia. Unum est sine dolore esse, alterum cum voluptate.

    {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