faq ~ accordions

Un accordion très facile à mettre en oeuvre 
C'est celui qu'utilise UP pour sa documentation auto-générée'

L'action FAQ est un accordion très simple : un clic pour ouvrir, un clic pour fermer, pas d'indicateur de l'état.

Les textes en h4 sont les titres et tout le code jusqu'au prochain h4 est le contenu de l'onglet

Le code pour l'exemple ci-dessus à copier dans le mode code de votre éditeur : 

{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}

Si vous souhaitez ne pas utiliser le mode code de votre éditeur, en restant dans le mode d'affichage standard de l'éditeur, vous pouvez sélectionner la classe de vos lignes ou utiliser l'action html. Ainsi <h4> de l'exemple précédent devient {up html=h4} et </h4> devient  {/up html}...

Un autre en utilisant les options. Il n'est pas prévu de cibler chaque élément séparément.

Comme expliqué précédemment, le code donné en exemple est à copier dans le mode code de votre éditeur.

{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)

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é

{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]}

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