Collapse — Ariane

Accessibilité

Lien direct vers cette section

Pris en charge automatiquement

Lien direct vers cette section

ar-collapse gère les attributs ARIA et les comportements keyboard sans intervention :

aria-expanded est posé sur le trigger (interne ou externe) et mis à jour à chaque ouverture/fermeture.
aria-controls est posé sur le trigger et pointe vers l’id du host ar-collapse. Si l’auteur ne fournit pas d’id, un identifiant unique est généré automatiquement.
Le panel utilise l’attribut hidden pour les états stables (pas de display:none inline) — compatible avec les styles qui surchargeraient display.
prefers-reduced-motion : si l’utilisateur a activé la préférence système de réduction de mouvement, les animations sont supprimées et les transitions sont instantanées.

Les critères WCAG suivants sont implémentés :

aria-expanded indique l’état ouvert/fermé du panel aux technologies d’assistance (WCAG 4.1.2 (ouvre dans un nouvel onglet)Name, Role, Value : aria-expanded communique l'état du composant aux AT.)
L’ordre DOM du trigger reflète l’ordre visuel — trigger-position modifie le DOM, pas le CSS order (WCAG 2.4.3 (ouvre dans un nouvel onglet)Focus Order : l'ordre de focus suit l'ordre visuel.)

Limitations connues

Lien direct vers cette section

Cross-shadow DOM : trigger-id et aria-controls reposent sur des IDs résolus dans le document. Si le trigger et le panel se trouvent dans des shadow roots différents, la référence aria-controls ne sera pas résolue par les technologies d’assistance. De même, le mode accordéon (name) ne fonctionne pas entre shadow roots distincts.
aria-controls → host element : aria-controls pointe sur l’élément <ar-collapse> lui-même (pas sur le panel interne du shadow DOM). Les AT qui traversent le shadow DOM (NVDA 2024+, JAWS 2024+, VoiceOver macOS 14+) résolvent correctement la référence vers le contenu. Sur les AT plus anciens, la relation peut être ignorée. Mitigation en attente : ElementInternals.ariaControlsElements (référence cross-shadow IDL) sera adoptée quand le support navigateur sera suffisant.

À votre charge

Lien direct vers cette section

Le trigger doit être un élément focusable avec un nom accessible (texte visible, aria-label, ou aria-labelledby).
Pour un pattern accordéon, ajouter role="region" et aria-labelledby sur chaque panel si le contexte sémantique le demande (ex: FAQ dans un article).
L’animation height via --ar-collapse-duration n’est pas automatique — vous devez activer la transition dans votre thème :

ar-collapse::part(collapsible) {
    transition: height var(--ar-collapse-duration, 0s) var(--ar-collapse-easing, ease);
}

Exemples

Lien direct vers cette section

Les exemples de cette page sont affichés avec le thème neutre du starter-kit.

Standalone

Lien direct vers cette section

Collapse simple avec un trigger interne via `slot="trigger"`. L'animation de hauteur est activée via `--ar-collapse-duration`.

Contenu qui se révèle à l'ouverture. Peut contenir n'importe quel HTML.

Voir le code

<ar-collapse style="--ar-collapse-duration:200ms;--ar-collapse-easing:ease">
    <button slot="trigger" class="ar-btn ar-btn-secondary">Voir plus</button>
    <div style="padding-top:1rem">
        <p style="margin:0">Contenu qui se révèle à l'ouverture. Peut contenir n'importe quel HTML.</p>
    </div>
</ar-collapse>

Ouvert par défaut

Lien direct vers cette section

L'attribut `open` ouvre le panel sans animation au chargement.

Contenu visible dès le chargement.

Voir le code

<ar-collapse open style="--ar-collapse-duration:200ms">
    <button slot="trigger" class="ar-btn ar-btn-secondary">Fermer</button>
    <div style="padding-top:1rem">
        <p style="margin:0">Contenu visible dès le chargement.</p>
    </div>
</ar-collapse>

Accordéon (name)

Lien direct vers cette section

Tous les `ar-collapse` partageant le même attribut `name` forment un groupe accordéon : ouvrir un item ferme automatiquement les autres.

Réponse à la question 1.

Réponse à la question 2.

Réponse à la question 3.

Voir le code

<div style="display:flex;flex-direction:column;gap:0.5rem">
    <ar-collapse name="faq" style="--ar-collapse-duration:200ms">
        <button slot="trigger" class="ar-btn ar-btn-secondary">Question 1</button>
        <div style="padding:0.75rem 0"><p style="margin:0">Réponse à la question 1.</p></div>
    </ar-collapse>
    <ar-collapse name="faq" style="--ar-collapse-duration:200ms">
        <button slot="trigger" class="ar-btn ar-btn-secondary">Question 2</button>
        <div style="padding:0.75rem 0"><p style="margin:0">Réponse à la question 2.</p></div>
    </ar-collapse>
    <ar-collapse name="faq" style="--ar-collapse-duration:200ms">
        <button slot="trigger" class="ar-btn ar-btn-secondary">Question 3</button>
        <div style="padding:0.75rem 0"><p style="margin:0">Réponse à la question 3.</p></div>
    </ar-collapse>
</div>

Trigger externe (trigger-id)

Lien direct vers cette section

L'attribut `trigger-id` accepte l'ID d'un bouton natif situé n'importe où dans la page. `aria-expanded` et `aria-controls` sont posés automatiquement sur ce bouton.

Contenu piloté par un trigger externe. Utile quand trigger et panel ne peuvent pas être enveloppés dans un wrapper commun.

Voir le code

<div>
    <button id="ar-doc-collapse-ext" class="ar-btn ar-btn-secondary">Révéler le contenu</button>
    <ar-collapse trigger-id="ar-doc-collapse-ext" style="--ar-collapse-duration:200ms">
        <div style="padding-top:0.75rem">
            <p style="margin:0">Contenu piloté par un trigger externe. Utile quand trigger et panel ne peuvent pas être enveloppés dans un wrapper commun.</p>
        </div>
    </ar-collapse>
</div>

Trigger après le contenu

Lien direct vers cette section

`trigger-position="after"` place le trigger après le contenu dans le DOM (et visuellement). Utile pour les patterns "Lire la suite" où le bouton apparaît sous le texte tronqué.

Les chimpanzés utilisent des outils, communiquent par gestes et sons, vivent en groupes sociaux complexes avec hiérarchies et alliances.

Leur génome est similaire à 98,7 % à celui de l'humain. Ils fabriquent des outils en bois pour extraire des termites, et utilisent des pierres comme enclumes pour casser des noix.

Les femelles transmettent ces techniques à leurs petits, une forme d'apprentissage culturel rare dans le règne animal.

Voir le code

<div>
    <p style="margin:0 0 0.5rem">Les chimpanzés utilisent des outils, communiquent par gestes et sons, vivent en groupes sociaux complexes avec hiérarchies et alliances.</p>
    <ar-collapse trigger-position="after" style="--ar-collapse-duration:200ms">
        <div style="padding-bottom: 0.5rem">
            <p style="margin:0 0 0.5rem">Leur génome est similaire à 98,7 % à celui de l'humain. Ils fabriquent des outils en bois pour extraire des termites, et utilisent des pierres comme enclumes pour casser des noix.</p>
            <p style="margin:0">Les femelles transmettent ces techniques à leurs petits, une forme d'apprentissage culturel rare dans le règne animal.</p>
        </div>
        <button slot="trigger" style="background:none;border:none;padding:0.25rem 0 0;color:var(--ar-color-interactive,#283276);text-decoration:underline;cursor:pointer;font:inherit">Lire la suite ↓</button>
    </ar-collapse>
</div>

Désactivé

Lien direct vers cette section

L'attribut `disabled` bloque l'interaction. Le composant pose `disabled` et `aria-disabled="true"` sur le trigger interne.

Ce contenu ne peut pas être révélé.

Voir le code

<ar-collapse disabled>
    <button slot="trigger" class="ar-btn ar-btn-secondary">Toggle (désactivé)</button>
    <div style="padding:0.75rem 0"><p>Ce contenu ne peut pas être révélé.</p></div>
</ar-collapse>

Démo interactive

Lien direct vers cette section

Manipulez les attributs pour voir le code et la preview se mettre à jour.

Contenu qui se révèle à l'ouverture. Peut contenir n'importe quel HTML.

opentrigger-idnametrigger-positiondisabled

<ar-collapse style="--ar-collapse-duration:200ms;--ar-collapse-easing:ease">
    <button slot="trigger" class="ar-btn ar-btn-secondary">Voir plus</button>
    <div style="padding-top:1rem">
        <p style="margin:0">Contenu qui se révèle à l'ouverture. Peut contenir n'importe quel HTML.</p>
    </div>
</ar-collapse>

Référence API

Lien direct vers cette section

Import

Lien direct vers cette section

Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.

CDN

npm

Importez ce composant depuis le CDN.

<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/collapse/index.js"></script>

Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :

import '@ariane-ui/core/dist/components/collapse/index.js';

Configuration

Lien direct vers cette section

Attributs et propriétés 5

Slots 2

Événements 6

Méthodes 2

openreflète

Ouvre ou ferme le panel.

Type booleanDéfaut false

triggerIdreflètetrigger-id

ID d'un élément déclencheur externe (light DOM). Quand défini, le slot `trigger` est ignoré.

Type stringDéfaut ''

namereflète

Groupe accordéon — les panels partageant le même `name` se ferment mutuellement.

Type stringDéfaut ''

triggerPositionreflètetrigger-position

Position du slot trigger par rapport au contenu dans le DOM. `before` (défaut) : trigger avant le panel. `after` : trigger après le panel. L'ordre DOM reflète l'ordre visuel — pas de CSS `order` — pour respecter WCAG 2.4.3.

Type 'before' | 'after'Défaut 'before'

disabledreflète

Désactive le composant — le trigger ne répond plus aux clics.

Type booleanDéfaut false

trigger

Élément déclencheur (ignoré si `trigger-id` est défini).

(default)

Contenu collapsible.

ar-collapse-showannulabledetail : { id: string | undefined }

Avant l'ouverture.

ar-collapse-show-preventeddetail : { id: string | undefined }

Émis si ar-collapse-show est annulé.

ar-collapse-showndetail : { id: string | undefined }

Après la fin de l'animation d'ouverture.

ar-collapse-hideannulabledetail : { id: string | undefined }

Avant la fermeture.

ar-collapse-hide-preventeddetail : { id: string | undefined }

Émis si ar-collapse-hide est annulé.

ar-collapse-hiddendetail : { id: string | undefined }

Après la fin de l'animation de fermeture.

show()retour : void

Ouvre le panel. No-op si déjà ouvert, en cours d'animation, ou disabled.

hide()retour : void

Ferme le panel. No-op si déjà fermé.

Personnalisation

Lien direct vers cette section

CSS Parts 4

CSS Custom States 3

CSS Custom Properties 2

Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.

collapse

Racine du composant.

trigger-container

Wrapper du slot trigger.

collapsible

Zone animée (overflow hidden, height 0 → auto). Nom distinct de `panel` (rôle transverse = conteneur flottant) : ce wrapper n'est jamais flottant.

body

Wrapper interne du contenu.

Utilisez le sélecteur :state(name) sur le tag pour styler ce composant en fonction de son état.
Composable avec ::part() pour cibler un élément interne (ar-collapse:state(name)::part(x)).
Sous Chrome et Edge 125, l'état est exposé avec le préfixe -- (:--name) : voir Compatibilité.

:state(open)

Le panel est ouvert.

:state(disabled)

Le composant est désactivé.

:state(animating)

Le panel est en cours d'ouverture ou de fermeture (animation height).

--ar-collapse-duration

Durée de la transition height.

--ar-collapse-easing

Easing de la transition height.