frendeitpt

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 onglets 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
  • css-head (base-css):

    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, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Si longus, levis; Quantum Aristoxeni ingenium consumptum videmus in musicis? Duo Reges: constructio interrete. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Ergo infelix una molestia, fellx rursus, cum is ipse anulus in praecordiis piscis inventus est? Illi enim inter se dissentiunt. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

    Quae cum magnifice primo dici viderentur, considerata minus probabantur. Quem si tenueris, non modo meum Ciceronem, sed etiam me ipsum abducas licebit. Age sane, inquam. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Philosophi autem in suis lectulis plerumque moriuntur. Quae animi affectio suum cuique tribuens atque hanc, quam dico. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus;

    Quare ad ea primum, si videtur; In qua si nihil est praeter rationem, sit in una virtute finis bonorum;

    Comprehensum, quod cognitum non habet? Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Quodsi ipsam honestatem undique pertectam atque absolutam. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Erat enim Polemonis. Res enim fortasse verae, certe graves, non ita tractantur, ut debent, sed aliquanto minutius. Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum.

    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. At enim, qua in vita est aliquid mali, ea beata esse non potest. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Sed ad haec, nisi molestum est, habeo quae velim.

    Ad quorum et cognitionem et usum iam corroborati natura ipsa praeeunte deducimur. Rapior illuc, revocat autem Antiochus, nec est praeterea, quem audiamus. Quae animi affectio suum cuique tribuens atque hanc, quam dico. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt. Sed fortuna fortis; At enim, qua in vita est aliquid mali, ea beata esse non potest.

    Aliter enim explicari, quod quaeritur, non potest. Ut proverbia non nulla veriora sint quam vestra dogmata. Quis non odit sordidos, vanos, leves, futtiles? Sint modo partes vitae beatae. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Verum esto: verbum ipsum voluptatis non habet dignitatem, nec nos fortasse intellegimus. Quae similitudo in genere etiam humano apparet. Sed haec quidem liberius ab eo dicuntur et saepius. Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. Tu enim ista lenius, hic Stoicorum more nos vexat.

    Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Aliter enim nosmet ipsos nosse non possumus. Stoici autem, quod finem bonorum in una virtute ponunt, similes sunt illorum; Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum. Hoc non est positum in nostra actione. Si longus, levis; Idem iste, inquam, de voluptate quid sentit? Satisne igitur videor vim verborum tenere, an sum etiam nunc vel Graece loqui vel Latine docendus?

    {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

    Version 2.5 Ajout option css-head et nom de classe indicé

    question n°1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut paulo ante docui, augendae voluptatis finis est doloris omnis amotio. Ego vero volo in virtute vim esse quam maximam; Et harum quidem rerum facilis est et expedita distinctio. Videamus igitur sententias eorum, tum ad verba redeamus. Quae in controversiam veniunt, de iis, si placet, disseramus. Rapior illuc, revocat autem Antiochus, nec est praeterea, quem audiamus. Sed plane dicit quod intellegit. Duo Reges: constructio interrete.

    question n°2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ea possunt paria non esse. Quae in controversiam veniunt, de iis, si placet, disseramus. Hoc sic expositum dissimile est superiori. Ita relinquet duas, de quibus etiam atque etiam consideret. Duo Reges: constructio interrete. Age, inquies, ista parva sunt. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;

    question n°3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Nam memini etiam quae nolo, oblivisci non possum quae volo. Praeterea et appetendi et refugiendi et omnino rerum gerendarum initia proficiscuntur aut a voluptate aut a dolore. Maximus dolor, inquit, brevis est. Sed erat aequius Triarium aliquid de dissensione nostra iudicare.

    Cela permet de réaliser des FAQ hautes en couleur !!

    Pour cela, chaque bloc dispose de 2 classes spécifiques à sa position : le 1er titre a la classe upfaq-title-1 et son contenu  upfaq-content-1

    Il suffit d'utiliser ces sélecteurs associés à #id pour s'assurer que seul cette FAQ sera concernée.

    {up faq
     | css-head=#id .upfaq-title-2[background:red]  #id .upfaq-content-2[background:plum;border-color:red]
                #id .upfaq-title-3[background:green;color:yellow]  #id .upfaq-content-3[background:lightgreen;border-color:green]}

    Note : border-color permet d'avoir la bordure basse du contenu de la même couleur que le titre.