Modification de Modèle:Accordéon

<div class="pti-accordeon {{{classe|}}} mw-collapsible {{{etat|mw-collapsed}}}" data-expandtext="{{{ouvrir|déplier}}}" data-collapsetext="{{{fermer|plier}}}">
<div class="pti-accordeon-titre">{{{titre|Section}}}</div>
<div class="mw-collapsible-content">

{{{contenu|À compléter}}}

</div>
</div>

<noinclude>
== Utilisation ==

Ce modèle sert à créer une section repliable et dépliable dans une page Athéna.

Il permet de condenser les pages longues sans supprimer l’information.

== Exemple simple ==

<pre>
{{Accordéon
|titre=Créer un lien interne
|contenu=
Un lien interne se crée avec des doubles crochets.

[[Doctrine Prométhée]]

Pour afficher un libellé différent :

[[Doctrine Prométhée|consulter la doctrine]]
}}
</pre>

== Exemple ouvert par défaut ==

Par défaut, l’accordéon est fermé. Pour qu’il soit ouvert au chargement de la page, laisser le paramètre <code>etat</code> vide.

<pre>
{{Accordéon
|titre=Section ouverte par défaut
|etat=
|contenu=
Ce contenu est visible au chargement de la page.
}}
</pre>

== Exemple avec libellés personnalisés ==

<pre>
{{Accordéon
|titre=Section personnalisée
|ouvrir=ouvrir
|fermer=fermer
|contenu=
Contenu de la section.
}}
</pre>

== Exemple avec variante graphique ==

Il est possible d’ajouter une classe CSS complémentaire via le paramètre <code>classe</code>.

<pre>
{{Accordéon
|titre=Point d’attention
|classe=pti-accordeon-attention
|contenu=
Contenu important à lire avec vigilance.
}}
</pre>

Classes utilisables :

* <code>pti-accordeon-note</code>
* <code>pti-accordeon-attention</code>
* <code>pti-accordeon-validation</code>
* <code>pti-accordeon-danger</code>

== Paramètres ==

{| class="wikitable"
! Paramètre
! Usage
! Valeur par défaut
|-
| <code>titre</code>
| Titre visible de l’accordéon.
| <code>Section</code>
|-
| <code>contenu</code>
| Contenu affiché lorsque l’accordéon est ouvert.
| <code>À compléter</code>
|-
| <code>etat</code>
| État initial de l’accordéon. Mettre <code>mw-collapsed</code> pour fermé, laisser vide pour ouvert.
| <code>mw-collapsed</code>
|-
| <code>classe</code>
| Classe CSS complémentaire pour une variante graphique.
| vide
|-
| <code>ouvrir</code>
| Libellé d’ouverture.
| <code>déplier</code>
|-
| <code>fermer</code>
| Libellé de fermeture.
| <code>plier</code>
|}

<div class="pti-encart pti-attention">
'''Point d’attention'''<br>
Pour les contenus très complexes contenant des tableaux, des modèles imbriqués ou beaucoup de caractères <code>|</code>, il peut être plus sûr d’utiliser directement le wikicode HTML de l’accordéon plutôt que le modèle.
</div>

== Wikicode direct équivalent ==

<pre>
<div class="pti-accordeon mw-collapsible mw-collapsed" data-expandtext="déplier" data-collapsetext="plier">
<div class="pti-accordeon-titre">Titre de la section</div>
<div class="mw-collapsible-content">

Contenu de la section.

</div>
</div>
</pre>

== Recommandation d’usage ==

À utiliser pour les pages longues, les guides, les pages de fonctionnement, les bibliothèques de modèles, les sections pédagogiques et les contenus secondaires que l’on souhaite rendre consultables sans alourdir la lecture principale.

[[Catégorie:Modèles documentaires]]
</noinclude>