Site pour les tests automatisés - Université de Montréal: Accordéons

Exemple 1 - Un niveau

Texte simple

Image

Vidéo

Exemple 2 - Deux niveaux

Deux niveaux - 1 élément

12 novembre 2025

Deux niveaux - 2 éléments

Deux niveaux - 3 éléments

Lorem ipsum dolor sit amet, consect - Niv 2

Nulla interdum massa laoreet - Niv 2

Image - Niv 2

Exemple 3 - Icone et date (la date ne doit pas apparaître)

Image verticale

Image horizontale

5 images à la suite. La visionneuse pour les gallerie (js) ne doit pas s'activer

Exemple 4 - Contenus avec date

Une capsule pour découvrir les risques et les bonnes pratiques en matière d’IA

10 avril 2026

Un autre contenu

17 avril 2026

Exemple 5 - Différents types de contenu

Éléments supportés

4 images

Mon tableau

La légende en date du 26 novembre
1	2	3	4
5	6	7	8
9	10	11	12

Vidéo

Niveau 1 - Éléments non supportés

Une carte

Shortcut

Onglet

Onglets en largeur normale

Le 1er onglet

Le contenu du premier onglet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet cursus lacus a facilisis. Integer pretium ligula nec nunc hendrerit gravida. Curabitur nibh dui, sollicitudin quis arcu id, convallis congue nulla. Phasellus non velit id enim porta consectetur. Proin lacinia est leo, non venenatis nibh consequat in. Curabitur lacinia facilisis convallis. Nullam mollis urna dolor, a lobortis ante molestie eu. Etiam consectetur rutrum elit sit amet efficitur. Morbi in molestie massa. Nulla fermentum, erat a vulputate efficitur, dolor arcu ornare massa, a semper lorem elit vel sapien.

Le 2e onglet

Le contenu du 2e onglet.

Praesent imperdiet cursus lacus a facilisis. Integer pretium ligula nec nunc hendrerit gravida. Curabitur nibh dui, sollicitudin quis arcu id, convallis congue nulla. Phasellus non velit id enim porta consectetur. Proin lacinia est leo, non venenatis nibh consequat in. Curabitur lacinia facilisis convallis. Nullam mollis urna dolor, a lobortis ante molestie eu.

Un onglet dont le titre est caché. Il n'apparaitra pas dans les onglets.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet cursus lacus a facilisis. Integer pretium ligula nec nunc hendrerit gravida. Curabitur nibh dui, sollicitudin quis arcu id, convallis congue nulla. Phasellus non velit id enim porta consectetur. Proin lacinia est leo, non venenatis nibh consequat in. Curabitur lacinia facilisis convallis. Nullam mollis urna dolor, a lobortis ante molestie eu. Etiam consectetur rutrum elit sit amet efficitur. Morbi in molestie massa. Nulla fermentum, erat a vulputate efficitur, dolor arcu ornare massa, a semper lorem elit vel sapien.

Le troisième onglet avec un titre plus long

Le contenu du 3e onglet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non velit id enim porta consectetur. Proin lacinia est leo, non venenatis nibh consequat in. Curabitur lacinia facilisis convallis. Nullam mollis urna dolor, a lobortis ante molestie eu. Etiam consectetur rutrum elit sit amet efficitur. Morbi in molestie massa. Nulla fermentum, erat a vulputate efficitur, dolor arcu ornare massa, a semper lorem elit vel sapien.

Onglet avec des images

Exemple 6 - Accordéons imbriqués 3 niveaux et + (non officiellement supporté)

Niveau 1 - Élément 1

Niveau 2 - Élément 1

Niveau 3 - Élément 1

Niveau 3 - Élément 2

Niveau 3 - Élément 3

Niveau 1 - Élément 2