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. Pugnant Stoici cum Peripateticis. Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Sed vos squalidius, illorum vides quam niteat oratio. Duo Reges: constructio interrete. Et quod est munus, quod opus sapientiae? Quae quo sunt excelsiores, eo dant clariora indicia naturae. Deinde dolorem quem maximum?

    Illum mallem levares, quo optimum atque humanissimum virum, Cn. Sit, inquam, tam facilis, quam vultis, comparatio voluptatis, quid de dolore dicemus? Contineo me ab exemplis. Philosophi autem in suis lectulis plerumque moriuntur. Iam id ipsum absurdum, maximum malum neglegi.

    Tubulo putas dicere? Ut optime, secundum naturam affectum esse possit. Non modo carum sibi quemque, verum etiam vehementer carum esse? Id et fieri posse et saepe esse factum et ad voluptates percipiendas maxime pertinere. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Nam, ut paulo ante docui, augendae voluptatis finis est doloris omnis amotio.

    Omnium enim rerum principia parva sunt, sed suis progressionibus usa augentur nec sine causa; Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit;

    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. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret. Quae similitudo in genere etiam humano apparet. Conferam tecum, quam cuique verso rem subicias; Duo Reges: constructio interrete. Illi enim inter se dissentiunt.

    Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Quid, si etiam iucunda memoria est praeteritorum malorum? Illa videamus, quae a te de amicitia dicta sunt. Scio enim esse quosdam, qui quavis lingua philosophari possint; Haec et tu ita posuisti, et verba vestra sunt.

    Bona autem corporis huic sunt, quod posterius posui, similiora. Scio enim esse quosdam, qui quavis lingua philosophari possint; At eum nihili facit; Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum iudicia defendere.

    Itaque contra est, ac dicitis; Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Suo enim quisque studio maxime ducitur. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti.

    {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. Etenim semper illud extra est, quod arte comprehenditur. At Zeno eum non beatum modo, sed etiam divitem dicere ausus est. Quae in controversiam veniunt, de iis, si placet, disseramus. Hoc est non modo cor non habere, sed ne palatum quidem. Duo Reges: constructio interrete.

    question n°2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fadio Gallo, cuius in testamento scriptum esset se ab eo rogatum ut omnis hereditas ad filiam perveniret. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Duo Reges: constructio interrete.

    question n°3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis; Memini vero, inquam; Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Praeclare enim Plato: Beatum, cui etiam in senectute contigerit, ut sapientiam verasque opiniones assequi possit. Duo Reges: constructio interrete. Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Que Manilium, ab iisque M.

    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.