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. Sedulo, inquam, faciam. Theophrastum tamen adhibeamus ad pleraque, dum modo plus in virtute teneamus, quam ille tenuit, firmitatis et roboris. At enim, qua in vita est aliquid mali, ea beata esse non potest. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Summum ením bonum exposuit vacuitatem doloris; Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Idemne, quod iucunde?

    Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Illis videtur, qui illud non dubitant bonum dicere -; Ergo id est convenienter naturae vivere, a natura discedere. Aliter autem vobis placet. Videmus igitur ut conquiescere ne infantes quidem possint. Antiquorum autem sententiam Antiochus noster mihi videtur persequi diligentissime, quam eandem Aristoteli fuisse et Polemonis docet. Hoc non est positum in nostra actione. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia;

    Duo Reges: constructio interrete. Age, inquies, ista parva sunt. An hoc usque quaque, aliter in vita? An haec ab eo non dicuntur? Haec para/doca illi, nos admirabilia dicamus. Quam illa ardentis amores excitaret sui! Cur tandem? Mihi enim satis est, ipsis non satis. Ego vero volo in virtute vim esse quam maximam;

    Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Quae similitudo in genere etiam humano apparet. Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit.

    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. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Iam id ipsum absurdum, maximum malum neglegi. Et quod est munus, quod opus sapientiae? An hoc usque quaque, aliter in vita? Illi enim inter se dissentiunt.

    Aliud igitur esse censet gaudere, aliud non dolere. Idque testamento cavebit is, qui nobis quasi oraculum ediderit nihil post mortem ad nos pertinere? Collige omnia, quae soletis: Praesidium amicorum. Apparet statim, quae sint officia, quae actiones. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius.

    Ille enim occurrentia nescio quae comminiscebatur; Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Et quidem iure fortasse, sed tamen non gravissimum est testimonium multitudinis. Primum divisit ineleganter; Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Quod maxime efficit Theophrasti de beata vita liber, in quo multum admodum fortunae datur. Teneo, inquit, finem illi videri nihil dolere. Istam voluptatem perpetuam quis potest praestare sapienti?

    Si enim ad populum me vocas, eum. Satisne vobis videor pro meo iure in vestris auribus commentatus? Duo Reges: constructio interrete. Ergo et avarus erit, sed finite, et adulter, verum habebit modum, et luxuriosus eodem modo. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Quod quidem nobis non saepe contingit. De quibus etsi a Chrysippo maxime est elaboratum, tamen a Zenone minus multo quam ab antiquis; Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. Vitiosum est enim in dividendo partem in genere numerare. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Quo studio Aristophanem putamus aetatem in litteris duxisse?

    {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