➠ faq : accordion très simple DEMO
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. Nam, ut paulo ante docui, augendae voluptatis finis est doloris omnis amotio. Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Duo Reges: constructio interrete. Ita relinquet duas, de quibus etiam atque etiam consideret. Itaque dicunt nec dubitant: mihi sic usus est, tibi ut opus est facto, fac. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Nulla profecto est, quin suam vim retineat a primo ad extremum.

    Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis; Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Is es profecto tu. Ut alios omittam, hunc appello, quem ille unum secutus est. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit.

    Nondum autem explanatum satis, erat, quid maxime natura vellet. Quod autem satis est, eo quicquid accessit, nimium est; Scio enim esse quosdam, qui quavis lingua philosophari possint; Equidem, sed audistine modo de Carneade? Ita multo sanguine profuso in laetitia et in victoria est mortuus. Quorum sine causa fieri nihil putandum est. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat. Ergo illi intellegunt quid Epicurus dicat, ego non intellego?

    Quod quidem nobis non saepe contingit. Audio equidem philosophi vocem, Epicure, sed quid tibi dicendum sit oblitus es. Quod ea non occurrentia fingunt, vincunt Aristonem; Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Mihi, inquam, qui te id ipsum rogavi?

    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. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Quod iam a me expectare noli. Tum Quintus: Est plane, Piso, ut dicis, inquit. Negat enim summo bono afferre incrementum diem. Duo Reges: constructio interrete. Non autem hoc: igitur ne illud quidem. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex.

    Vitiosum est enim in dividendo partem in genere numerare. Apparet statim, quae sint officia, quae actiones. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Satis est ad hoc responsum. Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum.

    Age, inquies, ista parva sunt. Quare, quoniam de primis naturae commodis satis dietum est nunc de maioribus consequentibusque videamus. Hoc non est positum in nostra actione.

    Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Cur, nisi quod turpis oratio est? Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret?

    {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)