---
description: Insérer plusieurs éléments sous forme de texte dépliable.
---

# Accordéon

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FUfDzJVlbuuwDZ5At5KqT%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-25%20a%CC%80%2016.41.19.png?alt=media&#x26;token=f0c905a2-a23f-4fdb-ae95-3c098cb6c68d" alt=""><figcaption></figcaption></figure>

## Disponible sur...

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3)

## Présentation

### Ajout d'un nouveau composant Accordéon

1. Sur la page en mode ![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSD1CZ72IMzn7bulXsE7C%2Fmode-rediger.png?alt=media\&token=f16ba40e-ee9d-4538-be59-993d8c842dae), trouvez la section où vous souhaitez ajouter un composant Accordéon.
2. Cliquez sur le bouton "+ Contenu" pour ouvrir le sélecteur d'éléments.
3. Sélectionnez  **Accordéon** dans l'onglet **Groupes**.

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2F3wpwNLYrCDCXKvDnw7W2%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-25%20a%CC%80%2016.39.35.png?alt=media&#x26;token=2214cc2e-d56a-4417-b66c-0cd3dbd7b53c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Pour les sites ![](https://img.shields.io/badge/satellites-oui-green?style=for-the-badge\&logo=typo3) le composant se nomme **Accordéon** et est disponible dans l'onglet **Contenus flexibles**.

Pour les sites ![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3) le composant se nomme **Contenu Accordéon** et est disponible dans l'onglet **Contenus spéciaux**.
{% endhint %}

### Configuration du composant

1. Une fois que vous avez ajouté le composant, vous verrez une boîte de dialogue de configuration.
2. Ajoutez un **titre** (optionnel)
3. Choisissez un **type** (pour le titre)
4. Ajoutez un **lien** (optionnel)
5. Dans la zone **Item d'accordéon** cliquez sur **+ Créer nouveau**.
   1. Entrez un En-tête (c'est ce qui s'affichera lorsque l'item est fermé)
   2. Entrez un **texte**
   3. Ajoutez éventuellement des **Média**
6. Recommencez le point 5. pour chaque item de l'accordéon.
7. Enregistrez vos modifications

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FKZslTYk1jiDmcGeiHCMi%2FCapture%20d%E2%80%99e%CC%81cran%202024-04-25%20a%CC%80%2016.48.27.png?alt=media&#x26;token=df9a51e2-c659-4ec1-bc23-5eabda1db86c" alt=""><figcaption></figcaption></figure>

## Exemples

Vous pouvez trouver des **exemples** d'utilisation du Contenu **Accordéon** :&#x20;

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)

{% embed url="https://template.univ-gustave-eiffel.fr/test-contenus/groupes/accordeon" %}
