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. Tibi hoc incredibile, quod beatissimum. Ut in geometria, prima si dederis, danda sunt omnia. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Duo Reges: constructio interrete. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Quod cum dixissent, ille contra.

Sed potestne rerum maior esse dissensio? Ergo ita: non posse honeste vivi, nisi honeste vivatur? Quae in controversiam veniunt, de iis, si placet, disseramus.

Quae cum magnifice primo dici viderentur, considerata minus probabantur. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Universa enim illorum ratione cum tota vestra confligendum puto. Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Immo istud quidem, inquam, quo loco quidque, nisi iniquum postulo, arbitratu meo. Quae sequuntur igitur?

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. Quid autem habent admirationis, cum prope accesseris? Maximas vero virtutes iacere omnis necesse est voluptate dominante. Immo istud quidem, inquam, quo loco quidque, nisi iniquum postulo, arbitratu meo. Duo Reges: constructio interrete. Conferam tecum, quam cuique verso rem subicias; Nec vero hoc oratione solum, sed multo magis vita et factis et moribus comprobavit. Ita est quoddam commune officium sapientis et insipientis, ex quo efficitur versari in iis, quae media dicamus. Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris.

Et non ex maxima parte de tota iudicabis? Ne in odium veniam, si amicum destitero tueri. Cave putes quicquam esse verius. Praetereo multos, in bis doctum hominem et suavem, Hieronymum, quem iam cur Peripateticum appellem nescio.

Qui ita affectus, beatum esse numquam probabis; Sed haec quidem liberius ab eo dicuntur et saepius. Cenasti in vita numquam bene, cum omnia in ista Consumis squilla atque acupensere cum decimano. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. ALIO MODO.

{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. Indicant pueri, in quibus ut in speculis natura cernitur. Quare hoc videndum est, possitne nobis hoc ratio philosophorum dare. Aut haec tibi, Torquate, sunt vituperanda aut patrocinium voluptatis repudiandum. Hoc non est positum in nostra actione. Addebat etiam se in legem Voconiam iuratum contra eam facere non audere, nisi aliter amicis videretur. An haec ab eo non dicuntur? Ut in geometria, prima si dederis, danda sunt omnia. Quae diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio interrete. Sed tu istuc dixti bene Latine, parum plane.

question n°2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qui ita affectus, beatum esse numquam probabis; Sed quot homines, tot sententiae; Nec mihi illud dixeris: Haec enim ipsa mihi sunt voluptati, et erant illa Torquatis. Multa sunt dicta ab antiquis de contemnendis ac despiciendis rebus humanis;

question n°3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Primum in nostrane potestate est, quid meminerimus? Hic Speusippus, hic Xenocrates, hic eius auditor Polemo, cuius illa ipsa sessio fuit, quam videmus. Duo Reges: constructio interrete. Quis est, qui non oderit libidinosam, protervam adolescentiam? Summum a vobis bonum voluptas dicitur. Neque solum ea communia, verum etiam paria esse dixerunt. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Negat esse eam, inquit, propter se expetendam.

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)