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. Sic enim censent, oportunitatis esse beate vivere. An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Non risu potius quam oratione eiciendum? Duo Reges: constructio interrete. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae recordamur. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Aliter enim explicari, quod quaeritur, non potest. Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis.

    Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Nihilo magis. Ac ne plura complectar-sunt enim innumerabilia-, bene laudata virtus voluptatis aditus intercludat necesse est. Immo istud quidem, inquam, quo loco quidque, nisi iniquum postulo, arbitratu meo. Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis. Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Mihi enim erit isdem istis fortasse iam utendum. Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur;

    Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Tum mihi Piso: Quid ergo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Hanc quoque iucunditatem, si vis, transfer in animum; Summum ením bonum exposuit vacuitatem doloris; Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Nonne igitur tibi videntur, inquit, mala? Si longus, levis; Ita ne hoc quidem modo paria peccata sunt.

    Si verbum sequimur, primum longius verbum praepositum quam bonum. Sed vos squalidius, illorum vides quam niteat oratio. Certe nihil nisi quod possit ipsum propter se iure laudari. Quae contraria sunt his, malane?

    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. Itaque hoc frequenter dici solet a vobis, non intellegere nos, quam dicat Epicurus voluptatem. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Duo Reges: constructio interrete. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere.

    Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Quam ob rem tandem, inquit, non satisfacit? Frater et T. Beatus autem esse in maximarum rerum timore nemo potest. At hoc in eo M. Quod quidem iam fit etiam in Academia. Quid ergo hoc loco intellegit honestum? Vestri haec verecundius, illi fortasse constantius.

    Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; At ego quem huic anteponam non audeo dicere;

    Si est nihil nisi corpus, summa erunt illa: valitudo, vacuitas doloris, pulchritudo, cetera. Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Quod quidem nobis non saepe contingit. Summum ením bonum exposuit vacuitatem doloris; Theophrasti igitur, inquit, tibi liber ille placet de beata vita?

    {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