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.

Exemple simple

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

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.

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

Exemple avec libellés personnalisés

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

Exemple avec variante graphique

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

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

Classes utilisables :

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

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

Point d’attention
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.

Wikicode direct équivalent

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