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. Tu quidem reddes; Quae cum essent dicta, finem fecimus et ambulandi et disputandi. De vacuitate doloris eadem sententia erit. Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Quare conare, quaeso. Duo Reges: constructio interrete.

Oratio me istius philosophi non offendit; Nam ante Aristippus, et ille melius. Collige omnia, quae soletis: Praesidium amicorum. Certe, nisi voluptatem tanti aestimaretis.

Qui ita affectus, beatum esse numquam probabis; Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. Bork Sed quid minus probandum quam esse aliquem beatum nec satis beatum?

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. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Quod non faceret, si in voluptate summum bonum poneret. Duo Reges: constructio interrete. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Iam id ipsum absurdum, maximum malum neglegi.

Frater et T. Quonam, inquit, modo? Deinde disputat, quod cuiusque generis animantium statui deceat extremum. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Non est ista, inquam, Piso, magna dissensio. Nam si amitti vita beata potest, beata esse non potest. Occultum facinus esse potuerit, gaudebit; Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Num igitur utiliorem tibi hunc Triarium putas esse posse, quam si tua sint Puteolis granaria? In qua quid est boni praeter summam voluptatem, et eam sempiternam?

Nunc vides, quid faciat. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne 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. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem. Ergo hoc quidem apparet, nos ad agendum esse natos. Restatis igitur vos; Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus.

question n°2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitiosum est enim in dividendo partem in genere numerare. Ex rebus enim timiditas, non ex vocabulis nascitur. Multoque hoc melius nos veriusque quam Stoici. Quod ea non occurrentia fingunt, vincunt Aristonem; In schola desinis. Rapior illuc, revocat autem Antiochus, nec est praeterea, quem audiamus.

question n°3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Facillimum id quidem est, inquam. Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Duarum enim vitarum nobis erunt instituta capienda.

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)