
Un accordion très facile à mettre en oeuvre
C'est celui qu'utilise UP pour sa documentation auto-générée'
{up faq}
-- titre en H4
-- contenu HTML
{/up faq}
- 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
texte pour la question n°1
texte pour la question n°2 mais un peu plus long
texte pour la question n°3
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.
un sous titre en h4
texte pour la question n°1
texte pour la question n°2 mais un peu plus long
{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é
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
upactionslist (1) readmore (1) csv2def (1) faq (3) icon (2) lorem (5) addcsshead (1) flexauto (1) jcontent-info (1)