faq ~ accordions

Un accordion très facile à mettre en oeuvre

➠ 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. Duo Reges: constructio interrete. Qualem igitur hominem natura inchoavit? Hi autem ponunt illi quidem prima naturae, sed ea seiungunt a finibus et a summa bonorum; Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Ita relinquet duas, de quibus etiam atque etiam consideret. Primum in nostrane potestate est, quid meminerimus? Superiores tres erant, quae esse possent, quarum est una sola defensa, eaque vehementer.

    Nam, ut paulo ante docui, augendae voluptatis finis est doloris omnis amotio. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Deinde dolorem quem maximum? Dic in quovis conventu te omnia facere, ne doleas. Maximus dolor, inquit, brevis est. Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. At, si voluptas esset bonum, desideraret. Istic sum, inquit. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Itaque hic ipse iam pridem est reiectus; Summus dolor plures dies manere non potest?

    Tu vero, inquam, ducas licet, si sequetur; Aliter homines, aliter philosophos loqui putas oportere? A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas. Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Quod ea non occurrentia fingunt, vincunt Aristonem; Quod si ita sit, cur opera philosophiae sit danda nescio.

    Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Philosophi autem in suis lectulis plerumque moriuntur. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Sed ne, dum huic obsequor, vobis molestus sim.

    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. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Quid est, quod ab ea absolvi et perfici debeat? Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Duo Reges: constructio interrete. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Vitae autem degendae ratio maxime quidem illis placuit quieta. Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit.

    Utrum igitur tibi litteram videor an totas paginas commovere? Tum Torquatus: Prorsus, inquit, assentior; Expectoque quid ad id, quod quaerebam, respondeas. Nonne igitur tibi videntur, inquit, mala? Huius ego nunc auctoritatem sequens idem faciam. Sed quid minus probandum quam esse aliquem beatum nec satis beatum? Estne, quaeso, inquam, sitienti in bibendo voluptas? Mihi, inquam, qui te id ipsum rogavi?

    Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Cyrenaici quidem non recusant; Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur.

    Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Conferam tecum, quam cuique verso rem subicias; Conferam tecum, quam cuique verso rem subicias; Est enim effectrix multarum et magnarum voluptatum. Cur iustitia laudatur? Vestri haec verecundius, illi fortasse constantius. Ut optime, secundum naturam affectum esse possit. Sed quanta sit alias, nunc tantum possitne esse tanta.

    {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