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 onglets en H4 et de contenu HTML
{up faq}
-- titre en H4
-- contenu HTML
{/up faq} *
@author: lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: ryans temkoski @tags: layout-dynamic
  • faq: aucun argument nécessaire

Définition des titres des onglets

  • title-tag = h4: pour utiliser une autre balise pour les titres
  • title-tag-preserve: 1 pour conserver 'title-tag' au lieu de div
  • title-class: classe pour le titre (onglet)
  • title-style: style inline pour le titre

Définition des panneaux

  • content-class: classe pour le contenu
  • content-style: style inline pour le contenu

style et options secondaires

  • id: identifiant
  • css-head (base-css): style ajouté dans le HEAD

Version 1.3.3
  • ajout classe active sur titre ouvert
Version 2.5
  • ajout option css-head
  • modification du nom des classes pour identifier chaque onglet
Version 2.9
  • ajout option title-tag-preserve 

 

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. Negat esse eam, inquit, propter se expetendam. Quid est, quod ab ea absolvi et perfici debeat? Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Atqui reperies, inquit, in hoc quidem pertinacem; Duo Reges: constructio interrete. Quis non odit sordidos, vanos, leves, futtiles? Eam stabilem appellas.

Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Vitiosum est enim in dividendo partem in genere numerare. Age sane, inquam. Quae quidem sapientes sequuntur duce natura tamquam videntes; Neque solum ea communia, verum etiam paria esse dixerunt. Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Quae cum magnifice primo dici viderentur, considerata minus probabantur. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri.

Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Bonum negas esse divitias, praeposìtum esse dicis? Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Quantum Aristoxeni ingenium consumptum videmus in musicis? Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur.

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. Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis; Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Immo istud quidem, inquam, quo loco quidque, nisi iniquum postulo, arbitratu meo.

Sit sane ista voluptas. Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. At ille pellit, qui permulcet sensum voluptate. Nihil opus est exemplis hoc facere longius. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Legimus tamen Diogenem, Antipatrum, Mnesarchum, Panaetium, multos alios in primisque familiarem nostrum Posidonium. Neque solum ea communia, verum etiam paria esse dixerunt. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Zenonis est, inquam, hoc Stoici. Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus? Quod iam a me expectare noli. Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur?

Satisne vobis videor pro meo iure in vestris auribus commentatus? Duo Reges: constructio interrete. Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers?

{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

Version 2.5 Ajout option css-head et nom de classe indicé

question n°1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pugnant Stoici cum Peripateticis. Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Consequens enim est et post oritur, ut dixi. Frater et T. Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. Quare hoc videndum est, possitne nobis hoc ratio philosophorum dare.

question n°2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Non enim, si malum est dolor, carere eo malo satis est ad bene vivendum. Quamquam id quidem, infinitum est in hac urbe; Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Vitae autem degendae ratio maxime quidem illis placuit quieta. Huius ego nunc auctoritatem sequens idem faciam. Duo Reges: constructio interrete. Sed ad haec, nisi molestum est, habeo quae velim. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Vitae autem degendae ratio maxime quidem illis placuit quieta. Quis est autem dignus nomine hominis, qui unum diem totum velit esse in genere isto voluptatis?

question n°3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeclarae mortes sunt imperatoriae; Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Collatio igitur ista te nihil iuvat. In eo enim positum est id, quod dicimus esse expetendum. Sed tu istuc dixti bene Latine, parum plane.

Cela permet de réaliser des FAQ hautes en couleur !!

Pour cela, chaque bloc dispose de 2 classes spécifiques à sa position : le 1er titre a la classe upfaq-title-1 et son contenu  upfaq-content-1

Il suffit d'utiliser ces sélecteurs associés à #id pour s'assurer que seul cette FAQ sera concernée.

{up faq
 | css-head=#id .upfaq-title-2[background:red]  #id .upfaq-content-2[background:plum;border-color:red]
            #id .upfaq-title-3[background:green;color:yellow]  #id .upfaq-content-3[background:lightgreen;border-color:green]}

Note : border-color permet d'avoir la bordure basse du contenu de la même couleur que le titre.

Option title-tag-preserve

Par défaut le titre d'un onglet utilise une balise DIV car elle n'a pas, en général, de propriété CSS.
title-tag ne sert que pour l'identification du titre des différents onglets.

L'option title-tag-preserve permet d'utiliser la balise d'origine (title-tag) à la place d'une balise DIV.
Dans ce cas, il vous revient d'ajouter les règles CSS pour neutraliser l'effet de votre balise

Pour info, cette page utilise 16 action(s) :
upactionslist (1) readmore (1) csv2def (1) faq (3) icon (2) lorem (5) addcsshead (1) flexauto (1) jcontent-info (1)