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 et/ou style inline pour le titre (onglet)
- title-style: classe et/ou style inline pour le titre
Définition des panneaux
- content-class: classe et/ou style inline pour le contenu
- content-style: classe et/ou style inline pour le contenu
style et options secondaires
- id: identifiant
- css-head (base-css): style ajouté dans le HEAD
Divers
- filter: conditions. Voir doc action filter
- 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
- Version 5.1
- ajout option filter
- options style et classe accepent des classes ou des styles
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
Veniam, fugiat do Excepteur pariatur. aliqua. nostrud commodo sed dolore id ut sunt deserunt in nulla velit quis labore dolore laborum. ea ex mollit incididunt exercitation sint culpa occaecat consectetur eu dolor esse.
Anim laborum. ut pariatur. dolore Duis enim ullamco ex irure Ut occaecat culpa dolor labore voluptate do elit, consequat. amet, nulla cupidatat et laboris aliquip nisi tempor.
Dolor consectetur incididunt ea ad nisi ut cupidatat Lorem et do eu dolor Duis cillum nulla irure proident, sit magna ipsum nostrud laborum. est sint aute esse Anim sunt in ullamco exercitation laboris.
Eu ut officia Anim ullamco et in esse irure ut minim velit id magna est qui occaecat aute Ut nisi sint aliquip exercitation dolore Duis cupidatat eiusmod consectetur ex.
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éparément.
un sous titre en h4
texte pour la question n°1
texte pour la question n°2 mais un peu plus long
Ut eiusmod ex ad aute deserunt amet, est velit consectetur do minim proident, Lorem Excepteur commodo eu sint dolore nisi et in pariatur. cillum sed enim dolor Ut aliqua.
Sunt eu ut deserunt dolore occaecat culpa cillum officia Excepteur reprehenderit incididunt ea id sint labore nulla sit Duis commodo sed in pariatur. voluptate dolor laborum. magna irure ex.
Labore ex aute et ut laborum. est Ut dolore nulla deserunt sint anim in exercitation dolor culpa voluptate adipiscing ullamco incididunt velit dolore cupidatat proident, Sunt veniam, nostrud Lorem sed ipsum sit reprehenderit.
Ullamco laborum. occaecat quis anim veniam, pariatur. reprehenderit do deserunt nostrud consectetur Ut cupidatat Labore dolore enim consequat. nulla Excepteur mollit dolor in sint sed aute exercitation Sunt esse.
{up faq | title-tag=h3 | title-class=background:#008800;t-jaune;bg-hover-vertFonce| 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 sauf lors survol en vert (bg-vertFonce bg-hover-vert)
Depuis la version 5.1, il est possible de mélanger les styles et classes dans les options. A condition de ne pas oublier le point-virgule pour les séparer. - content-class
- bordure verte sauf sur le coté top (bd-vertFonce bt0) et fond jaune paille (bg-jauneClair)
Cela peut--être fait directement dans le shortcode avec l'option css-base. Exemple :
title-class=maClasseSurvol | css-head=.maClasseSurvol:hover[background=#004400]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é
Officia cupidatat eu reprehenderit culpa do sunt laboris nostrud aliquip nisi cillum consectetur quis est tempor velit sed veniam, nulla sint incididunt exercitation Ut minim Duis id.
Ex sunt ut veniam, aliqua. proident, do culpa laboris dolor pariatur. in anim sint aute laborum. cupidatat id esse ut dolor fugiat ipsum dolore officia exercitation Duis.
Exercitation incididunt aute in quis officia reprehenderit amet, nisi anim sit eiusmod dolor sint dolore ipsum est aliquip qui pariatur. enim nostrud deserunt occaecat ea proident, tempor commodo.
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
div (2) upactionslist (1) readmore (1) csv2def (1) faq (3) icon (2) lorem (5) addcsshead (1) flexauto (1) jcontent-info (1)