Modèle:Accordéon

Section

À compléter

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.

Point technique
Les exemples affichés ci-dessous sont montrés en action avec le wikicode HTML équivalent. Cela évite d’appeler le modèle {{Accordéon}} à l’intérieur de sa propre page de documentation, ce qui pourrait créer une boucle de modèle.

Exemple simple

Wikicode à copier

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

Rendu obtenu

Créer un lien interne

Un lien interne se crée avec des doubles crochets.

Doctrine Prométhée

Pour afficher un libellé différent :

consulter la doctrine

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 etat vide.

Wikicode à copier

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

Il peut contenir du texte, des liens, des listes ou des encarts.
}}

Rendu obtenu

Section ouverte par défaut

Ce contenu est visible au chargement de la page.

Il peut contenir du texte, des liens, des listes ou des encarts.

Exemple avec libellés personnalisés

Wikicode à copier

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

Rendu obtenu

Section personnalisée

Contenu de la section.

Exemples avec variantes graphiques

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

Les variantes disponibles sont :

• pti-accordeon-note
• pti-accordeon-attention
• pti-accordeon-validation
• pti-accordeon-danger

Variante note

Wikicode à copier

{{Accordéon
|titre=Note documentaire
|classe=pti-accordeon-note
|contenu=
Contenu informatif ou explicatif.
}}

Rendu obtenu

Note documentaire

Contenu informatif ou explicatif.

Variante point d’attention

Wikicode à copier

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

Rendu obtenu

Point d’attention

Contenu à lire avec vigilance.

Variante validation

Wikicode à copier

{{Accordéon
|titre=Élément validé
|classe=pti-accordeon-validation
|contenu=
Contenu stabilisé, validé ou considéré comme règle de référence.
}}

Rendu obtenu

Élément validé

Contenu stabilisé, validé ou considéré comme règle de référence.

Variante alerte critique

Wikicode à copier

{{Accordéon
|titre=Alerte critique
|classe=pti-accordeon-danger
|contenu=
Contenu critique : risque fort, erreur à éviter, sécurité, confidentialité ou obsolescence dangereuse.
}}

Rendu obtenu

Alerte critique

Contenu critique : risque fort, erreur à éviter, sécurité, confidentialité ou obsolescence dangereuse.

Exemple avec contenu structuré

Wikicode à copier

{{Accordéon
|titre=Liste structurée
|classe=pti-accordeon-validation
|contenu=
Une section accordéon peut contenir une liste :

* premier élément ;
* deuxième élément ;
* troisième élément.

Elle peut aussi contenir un lien :

[[Fonctionnement du wiki]]
}}

Rendu obtenu

Liste structurée

Une section accordéon peut contenir une liste :

• premier élément ;
• deuxième élément ;
• troisième élément.

Elle peut aussi contenir un lien :

Fonctionnement du wiki

Paramètres

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

Wikicode direct équivalent

Pour les contenus très complexes contenant des tableaux, des modèles imbriqués ou beaucoup de caractères |, il peut être plus sûr d’utiliser directement le wikicode HTML de l’accordéon plutôt que le modèle.

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

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.

Principe d’usage
Un accordéon ne sert pas à cacher une information importante. Il sert à organiser une information secondaire, détaillée ou pédagogique afin de préserver la lisibilité de la page.