JoomlaDay FR

➠ faq : accordion très simple DEMO
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. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis. Quae cum essent dicta, finem fecimus et ambulandi et disputandi.

    Atqui reperies, inquit, in hoc quidem pertinacem; Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis; Is es profecto tu. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Cur, nisi quod turpis oratio est? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt;

    Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus tamque multae. Totum autem id externum est, et quod externum, id in casu est. Effluit igitur voluptas corporis et prima quaeque avolat saepiusque relinquit causam paenitendi quam recordandi. Et quidem iure fortasse, sed tamen non gravissimum est testimonium multitudinis. Illa tamen simplicia, vestra versuta.

    Quam nemo umquam voluptatem appellavit, appellat; Quae ista amicitia est? Ut proverbia non nulla veriora sint quam vestra dogmata. Hoc uno captus Erillus scientiam summum bonum esse defendit nec rem ullam aliam per se expetendam. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Duo Reges: constructio interrete.

    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. Duo Reges: constructio interrete. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Idemne, quod iucunde? Tamen a proposito, inquam, aberramus. Minime vero, inquit ille, consentit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Quia nec honesto quic quam honestius nec turpi turpius. Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere.

    Si sapiens, ne tum quidem miser, cum ab Oroete, praetore Darei, in crucem actus est. Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Id Sextilius factum negabat. Neutrum vero, inquit ille. Nos paucis ad haec additis finem faciamus aliquando; Ergo infelix una molestia, fellx rursus, cum is ipse anulus in praecordiis piscis inventus est? Aliter homines, aliter philosophos loqui putas oportere? Minime id quidem, inquam, alienum, multumque ad ea, quae quaerimus, explicatio tua ista profecerit. Sed quot homines, tot sententiae;

    Atqui, inquam, Cato, si istud optinueris, traducas me ad te totum licebit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Nam quid possumus facere melius? Rationis enim perfectio est virtus; Facile est hoc cernere in primis puerorum aetatulis. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Claudii libidini, qui tum erat summo ne imperio, dederetur. Qui non moveatur et offensione turpitudinis et comprobatione honestatis?

    Quem si tenueris, non modo meum Ciceronem, sed etiam me ipsum abducas licebit. Non semper, inquam;

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