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

    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. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Est, ut dicis, inquam. Si quidem, inquit, tollerem, sed relinquo. Quis Aristidem non mortuum diligit? Primum cur ista res digna odio est, nisi quod est turpis? Duo Reges: constructio interrete.

    Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Nihil illinc huc pervenit. Ratio quidem vestra sic cogit.

    Illud dico, ea, quae dicat, praeclare inter se cohaerere. Quid de Pythagora?

    Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Ut proverbia non nulla veriora sint quam vestra dogmata. Pauca mutat vel plura sane; Isto modo ne improbos quidem, si essent boni viri.

    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. Ea possunt paria non esse. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Tu enim ista lenius, hic Stoicorum more nos vexat. Duo Reges: constructio interrete. Summus dolor plures dies manere non potest? Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris?

    Bonum negas esse divitias, praeposìtum esse dicis? Murenam te accusante defenderem. Bonum valitudo: miser morbus. Hanc ergo intuens debet institutum illud quasi signum absolvere. Faceres tu quidem, Torquate, haec omnia; Sed ego in hoc resisto; Itaque ad tempus ad Pisonem omnes. Quod vestri non item.

    Istic sum, inquit. Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Esse enim, nisi eris, non potes. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Hanc quoque iucunditatem, si vis, transfer in animum; Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Animum autem reliquis rebus ita perfecit, ut corpus; Sint modo partes vitae beatae.

    Qualem igitur hominem natura inchoavit? Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.

    {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