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. Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Ad eos igitur converte te, quaeso. Quo modo autem optimum, si bonum praeterea nullum est? Duo Reges: constructio interrete. Quis enim potest ea, quae probabilia videantur ei, non probare? Egone quaeris, inquit, quid sentiam? Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. Disserendi artem nullam habuit. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Omnes enim iucundum motum, quo sensus hilaretur. Quae cum dixisset paulumque institisset, Quid est?

    Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Quid ergo attinet gloriose loqui, nisi constanter loquare? Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem. Ne in odium veniam, si amicum destitero tueri. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Si quae forte-possumus. Ut proverbia non nulla veriora sint quam vestra dogmata.

    Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Et quidem, inquit, vehementer errat; Ita multo sanguine profuso in laetitia et in victoria est mortuus. At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Sed tu istuc dixti bene Latine, parum plane.

    Quamquam te quidem video minime esse deterritum. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Quodsi ipsam honestatem undique pertectam atque absolutam. Duarum enim vitarum nobis erunt instituta capienda. Primum cur ista res digna odio est, nisi quod est turpis?

    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. Prioris generis est docilitas, memoria; Duo Reges: constructio interrete. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? Nam ista vestra: Si gravis, brevis; Aliter enim explicari, quod quaeritur, non potest.

    Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Eam tum adesse, cum dolor omnis absit; Ac tamen hic mallet non dolere. At, si voluptas esset bonum, desideraret. Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere. Nonne igitur tibi videntur, inquit, mala?

    Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Cur deinde Metrodori liberos commendas? Ita prorsus, inquam; Quamquam tu hanc copiosiorem etiam soles dicere. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Ita multa dicunt, quae vix intellegam. At cum de plurimis eadem dicit, tum certe de maximis. Suam denique cuique naturam esse ad vivendum ducem.

    Videamus igitur sententias eorum, tum ad verba redeamus. Nam si amitti vita beata potest, beata esse non potest. Sit hoc ultimum bonorum, quod nunc a me defenditur; Quod autem satis est, eo quicquid accessit, nimium est; Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. Dic in quovis conventu te omnia facere, ne doleas. Quod praeceptum quia maius erat, quam ut ab homine videretur, idcirco assignatum est deo. Tibi hoc incredibile, quod beatissimum.

    {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