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. Vitae autem degendae ratio maxime quidem illis placuit quieta. Sed quanta sit alias, nunc tantum possitne esse tanta. Eam tum adesse, cum dolor omnis absit; Duo Reges: constructio interrete. Rhetorice igitur, inquam, nos mavis quam dialectice disputare? Tum Piso: Atqui, Cicero, inquit, ista studia, si ad imitandos summos viros spectant, ingeniosorum sunt; Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Non dolere, inquam, istud quam vim habeat postea videro; Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius.

    Non quam nostram quidem, inquit Pomponius iocans; Id enim volumus, id contendimus, ut officii fructus sit ipsum officium.

    Omnes enim iucundum motum, quo sensus hilaretur. Sed haec nihil sane ad rem; An vero, inquit, quisquam potest probare, quod perceptfum, quod. Nam si amitti vita beata potest, beata esse non potest.

    Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Videsne quam sit magna dissensio? Quae cum magnifice primo dici viderentur, considerata minus probabantur. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Animadverti, ínquam, te isto modo paulo ante ponere, et scio ab Antiocho nostro dici sic solere; An potest, inquit ille, quicquam esse suavius quam nihil dolere? Nunc haec primum fortasse audientis servire debemus. Haec quo modo conveniant, non sane intellego.

    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. Laboro autem non sine causa; Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Gloriosa ostentatio in constituendo summo bono. Duo Reges: constructio interrete. Propter nos enim illam, non propter eam nosmet ipsos diligimus.

    Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; At ille pellit, qui permulcet sensum voluptate. Quasi ego id curem, quid ille aiat aut neget. Quod quidem iam fit etiam in Academia.

    Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Sed hoc sane concedamus. Deinceps videndum est, quoniam satis apertum est sibi quemque natura esse carum, quae sit hominis natura. Et quidem saepe quaerimus verbum Latinum par Graeco et quod idem valeat; Quid me istud rogas? Videmus igitur ut conquiescere ne infantes quidem possint. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Sed mehercule pergrata mihi oratio tua. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Murenam te accusante defenderem.

    Isto modo, ne si avia quidem eius nata non esset. Quis non odit sordidos, vanos, leves, futtiles? Quis non odit sordidos, vanos, leves, futtiles? Terram, mihi crede, ea lanx et maria deprimet. Dat enim intervalla et relaxat. Haec et tu ita posuisti, et verba vestra sunt. Age sane, inquam. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? At ille pellit, qui permulcet sensum voluptate.

    {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