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. Iam illud quale tandem est, bona praeterita non effluere sapienti, mala meminisse non oportere? Ita prorsus, inquam; Duo Reges: constructio interrete. Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat; Nam de summo mox, ut dixi, videbimus et ad id explicandum disputationem omnem conferemus. Minime vero, inquit ille, consentit.

    Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Qui enim existimabit posse se miserum esse beatus non erit. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare?

    Hanc quoque iucunditatem, si vis, transfer in animum; Commentarios quosdam, inquam, Aristotelios, quos hic sciebam esse, veni ut auferrem, quos legerem, dum essem otiosus; Eadem nunc mea adversum te oratio est. In eo enim positum est id, quod dicimus esse expetendum. Ac tamen, ne cui loco non videatur esse responsum, pauca etiam nunc dicam ad reliquam orationem tuam. Mihi quidem Antiochum, quem audis, satis belle videris attendere.

    Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Nonne igitur tibi videntur, inquit, mala? Nunc vero a primo quidem mirabiliter occulta natura est nec perspici nec cognosci potest. Quamquam id quidem licebit iis existimare, qui legerint. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Summum ením bonum exposuit vacuitatem doloris; Tu autem negas fortem esse quemquam posse, qui dolorem malum putet.

    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. Nosti, credo, illud: Nemo pius est, qui pietatem-; Consequens enim est et post oritur, ut dixi. Duo Reges: constructio interrete. Bonum negas esse divitias, praeposìtum esse dicis? Neutrum vero, inquit ille. At hoc in eo M. Ergo ita: non posse honeste vivi, nisi honeste vivatur?

    In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Fortasse id optimum, sed ubi illud: Plus semper voluptatis?

    Multoque hoc melius nos veriusque quam Stoici. Quo invento omnis ab eo quasi capite de summo bono et malo disputatio ducitur. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem. Res enim se praeclare habebat, et quidem in utraque parte. Ubi ut eam caperet aut quando? Nam Pyrrho, Aristo, Erillus iam diu abiecti. Quis est enim, in quo sit cupiditas, quin recte cupidus dici possit?

    Quasi ego id curem, quid ille aiat aut neget. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Non semper, inquam; Non risu potius quam oratione eiciendum? Aut unde est hoc contritum vetustate proverbium: quicum in tenebris?

    {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. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? Huius, Lyco, oratione locuples, rebus ipsis ielunior. Ut proverbia non nulla veriora sint quam vestra dogmata. Summum ením bonum exposuit vacuitatem doloris; Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Duo Reges: constructio interrete. Si mala non sunt, iacet omnis ratio Peripateticorum.

    question n°2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quanta sit alias, nunc tantum possitne esse tanta. Hoc sic expositum dissimile est superiori. Quid, quod res alia tota est? Beatus autem esse in maximarum rerum timore nemo potest. Et quidem, inquit, vehementer errat; Quid adiuvas?

    question n°3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Fortemne possumus dicere eundem illum Torquatum? An potest, inquit ille, quicquam esse suavius quam nihil dolere? Hic, qui utrumque probat, ambobus debuit uti, sicut facit re, neque tamen dividit verbis. Suo genere perveniant ad extremum; Certe, nisi voluptatem tanti aestimaretis. Sed quid sentiat, non videtis.

    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.