--- title: Éléments dépliables avec extraits de contenu slug: qa-playground-02-french/elements-depliables-avec-extraits-de-contenu createdAt: 2026-04-16T07:58:14.828Z --- ::::::ExpandableHeading{isOpen="true"} # Expandable Heading 1 | **Champion** | **Role** | **Win Rate** | | ------------ | -------- | ------------ | | Jinx | Marksman | 52.3% | | Thresh | Support | 51.8% | | Yasuo | Mid | 49.1% | | Vi | Jungle | 50.7% | *** | **MERGED HEADER - NO COLORS** | | | | ----------------------------- | -------- | ----- | | Jinx | Marksman | 52.3% | | Thresh | Support | 51.8% | | Yasuo | Mid | 49.1% | | Vi | Jungle | 50.7% | *** | **MERGED HEADER - COLORS** | | | | -------------------------- | --------- | --------- | | 🔴 Red | 🟠 Orange | 🟡 Yellow | | 🔵 Blue | 🟣 Purple | 🟢 Green | | 🩷 Pink | ⚪ White | 🟤 Brown | | 🔶 Gold | 🩵 Cyan | 🖤 Black | *** | **MERGED CELLS** | | | | ------------------- | - | ------------------- | | THIS CELL IS MERGED | | | | THIS CELL IS MERGED | | THIS CELL IS MERGED | | | | | :::::ExpandableHeading{isOpen="true"} ## Expandable Heading ::::ExpandableHeading{isOpen="true"} ### Expandable Heading 3 :::ExpandableHeading{isOpen="true"} # Expandable Heading 1 ::: :::: ::::: :::::: ::::ExpandableHeading{isOpen="true"} ## En-tête extensible 2 # En-tête 1 :::ExpandableHeading # En-tête extensible 1 Contenu de l’en-tête 1 ::: ## En-tête 2 :::ExpandableHeading ## En-tête extensible 2 Contenu de l’en-tête 2 ::: ### En-tête 3 :::ExpandableHeading ### En-tête extensible 3 Contenu de l’en-tête 3 ::: :::: :::ExpandableHeading{isOpen="true"} ### Titre extensible 3 - [ ] Élément de liste de contrôle sans retrait 1 - [ ] Élément de liste de contrôle sans retrait 2 - [ ] Élément de liste de contrôle sans retrait 3 - [ ] Élément de liste de contrôle sans retrait 4 - [ ] Élément de liste de contrôle avec retrait 1 - [ ] Élément de liste de contrôle avec retrait 2 - [ ] Élément de liste de contrôle avec retrait 3 - [ ] Élément de liste de contrôle avec retrait 4 - [ ] Élément de liste à puces sans retrait 1 - [ ] Élément de liste à puces sans retrait 2 - [ ] Élément de liste à puces sans retrait 3 - [ ] Élément de liste à puces sans retrait 4 1. Élément de liste numérotée sans retrait 1 2. Élément de liste numérotée sans retrait 2 3. Élément de liste numérotée sans retrait 3 4. Élément de liste numérotée sans retrait 4 1. Élément de liste numérotée avec retrait 1 1. Élément de liste numérotée avec retrait 2 1. Élément de liste numérotée avec retrait 3 1. Élément de liste numérotée avec retrait 4 ::: ::::ExpandableHeading{isOpen="true"} # En-tête dépliable 1 :::DropList ```json { "columns": [ { "id": "1", "name": "💡 CONCEPT", "items": [ { "id": "F8gH9iJ0kL1mN2oP3qR4s", "content": "🎮 BRAINSTORMING DU CONCEPT DE JEU", "justAdded": false }, { "id": "G9hI0jK1lM2nO3pQ4rS5t", "content": "📋 DOCUMENT DE CONCEPTION DE JEU", "justAdded": false }, { "id": "H0iJ1kL2mN3oP4qR5sT6u", "content": "🎨 EXPLORATION DU STYLE ARTISTIQUE", "justAdded": false } ] }, { "id": "2", "name": "🎨 PRÉ-PRODUCTION", "items": [ { "id": "J2kL3mN4oP5qR6sT7uV8w", "content": "🎨 CONCEPT ART DES PERSONNAGES", "justAdded": false }, { "id": "K3lM4nO5pQ6rS7tU8vW9x", "content": "🏗️ MAQUETTES DE LEVEL DESIGN", "justAdded": false }, { "id": "L4mN5oP6qR7sT8uV9wX0y", "content": "🎵 DÉBUT DE LA COMPOSITION MUSICALE", "justAdded": false } ] }, { "id": "3", "name": "💻 PRODUCTION", "items": [ { "id": "M5nO6pQ7rS8tU9vW0xY1z", "content": "🎮 MÉCANIQUES DE JEU DE BASE", "justAdded": false }, { "id": "N6oP7qR8sT9uV0wX1yZ2a", "content": "🎨 CRÉATION D’ASSETS 3D", "justAdded": false }, { "id": "O7pQ8rS9tU0vW1xY2zA3b", "content": "🎵 ENREGISTREMENT DES EFFETS SONORES", "justAdded": false } ] }, { "id": "4", "name": "🧪 TEST", "items": [ { "id": "P8qR9sT0uV1wX2yZ3aB4c", "content": "🐛 TEST ET CORRECTION DE BUGS", "justAdded": false }, { "id": "Q9rS0tU1vW2xY3zA4bC5d", "content": "🎮 TEST D'ÉQUILIBRAGE DU GAMEPLAY", "justAdded": false }, { "id": "R0sT1uV2wX3yZ4aB5cD6e", "content": "📱 TEST DE COMPATIBILITÉ MULTIPLATEFORME", "justAdded": false } ] }, { "id": "5", "name": "🚀 LANCEMENT", "items": [ { "id": "S1tU2vW3xY4zA5bC6dE7f", "content": "📢 LANCEMENT DE LA CAMPAGNE MARKETING", "justAdded": false }, { "id": "T2uV3wX4yZ5aB6cD7eF8g", "content": "🎮 SORTIE DU JEU", "justAdded": false }, { "id": "U3vW4xY5zA6bC7dE8fG9h", "content": "📊 SUIVI DES ANALYTIQUES", "justAdded": false } ] }, { "id": "6", "name": "🔄 POST-LANCEMENT", "items": [ { "id": "V4wX5yZ6aB7cD8eF9gH0i", "content": "🐛 CORRECTIONS DE BUGS CRITIQUES", "justAdded": false }, { "id": "W5xY6zA7bC8dE9fG0hI1j", "content": "🎮 MISES À JOUR DE CONTENU", "justAdded": false }, { "id": "X6yZ7aB8cD9eF0gH1iJ2k", "content": "📈 OPTIMISATION DES PERFORMANCES", "justAdded": false } ] } ] } ``` ::: :::: ::::ExpandableHeading{isOpen="true"} ## Titre Déployable 2 :::hint{type="success"} ✅ **RÉTABLISSEMENT DU SYSTÈME TERMINÉ** Tous les systèmes sont désormais pleinement opérationnels ! Les problèmes de base de données ont été résolus et toutes les données des utilisateurs sont accessibles. Nous nous excusons pour tout inconvénient causé durant l’interruption. **Résumé du rétablissement :** - Toutes les données utilisateurs restaurées - Performances optimisées - Surveillance supplémentaire mise en place ::: :::hint{type="warning"} ⚠️ **MAINTENANCE PLANIFIÉE** Nous effectuerons une maintenance programmée de notre système de traitement des paiements le dimanche 28 janvier, de 02h00 à 06h00 UTC. Durant cette période, le traitement des paiements sera temporairement indisponible. **Services affectés :** - Paiements par carte bancaire - Intégration PayPal - Renouvellements d’abonnement ::: :::hint{type="danger"} 🚨 **PANNE CRITIQUE DU SYSTÈME** Notre serveur principal de base de données rencontre actuellement des problèmes. L’accès aux données des utilisateurs est temporairement indisponible. Notre équipe d’ingénierie travaille à résoudre ce problème immédiatement. **Temps estimé de résolution :** 2 à 4 heures **Dernière mise à jour :** 2024-01-27 14:30 UTC **Page de statut :** **[status.example.com](https://status.example.com)** ::: :::: :::::ExpandableHeading{isOpen="true"} ### Titre extensible 3 ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="NONE"} **📚 COURS DE PROGRAMMATION DÉBUTANT** Commencez votre parcours de codage avec notre cours complet pour débutants couvrant HTML, CSS et JavaScript **Ce que vous apprendrez :** - Les bases du développement web **Durée :** 8 semaines **Niveau :** Débutant **Prix :** 299 $ ::: :::LinkArrayItem{headerType="COLOR" headerColor="#3B82F6"} **⚡ PROGRAMME DE MAÎTRISE REACT.JS** Maîtrisez le développement React moderne avec les hooks, le context et les modèles avancés. **Sujets clés :** - Hooks et Context React **Durée :** 12 semaines **Niveau :** Intermédiaire **Prix :** 599 $ ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=200&fit=crop"} **🚀 DÉVELOPPEMENT FULL-STACK** Programme complet de développement full-stack avec Node.js, Express et MongoDB. **Programme complet :** - Développement backend **Durée :** 16 semaines **Niveau :** Avancé **Prix :** 1 299 $ ::: :::: ::::: :::::ExpandableHeading{isOpen="true"} # Titre extensible 1 ::::WorkflowBlock :::WorkflowBlockItem **🔍 RECHERCHE DE PROPRIÉTÉ** **RECHERCHE INITIALE :** - Recherche de marché - Préférences de localisation - Détermination du budget - Sélection du type de propriété ::: :::WorkflowBlockItem **💰 PRÉPARATION DU FINANCEMENT** **PRÉ-APPROBATION DE PRÊT :** - Vérification du crédit - Vérification des revenus - Ratio dette-revenu - Calcul de l’acompte ::: :::WorkflowBlockItem **📋 OFFRE & NÉGOCIATION** **PRÉPARATION DE L’OFFRE :** - Analyse du marché - Détermination du prix de l’offre - Négociation des conditions - Planification des imprévus ::: :::WorkflowBlockItem **🏠 CLÔTURE & PRISE DE POSSESSION** **PRÉPARATION DE LA CLÔTURE :** - Inspection finale - Calcul des frais de clôture - Préparation des documents - Transfert de fonds ::: :::: ::::: :::::ExpandableHeading{isOpen="true"} ## Titre dépliable 2 ::::VerticalSplit{layout="left"} :::VerticalSplitItem **📋 ASANA** *Plateforme de collaboration d'équipe* **FONCTIONNALITÉS CLÉS :** - Gestion des tâches - Collaboration d'équipe **POINTS FORTS :** ✅ Interface conviviale ✅ Excellente application mobile **FAIBLESSES :** ❌ Rapports limités ❌ Diagrammes de Gantt basiques ::: :::VerticalSplitItem **📊 MONDAY.COM** *Système d’exploitation de travail* **FONCTIONNALITÉS CLÉS :** - Gestion visuelle de projet - Automatisation **POINTS FORTS :** ✅ Hautement personnalisable ✅ Automatisation puissante **FAIBLESSES :** ❌ Courbe d'apprentissage élevée ❌ Coûteux pour les petites équipes ::: :::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem **📋 ASANA** *Plateforme de collaboration d'équipe* **FONCTIONNALITÉS CLÉS :** - Gestion des tâches - Collaboration d'équipe **POINTS FORTS :** ✅ Interface conviviale ✅ Excellente application mobile **FAIBLESSES :** ❌ Rapports limités ❌ Diagrammes de Gantt basiques ::: :::VerticalSplitItem **📊 MONDAY.COM** *Système d’exploitation de travail* **FONCTIONNALITÉS CLÉS :** - Gestion visuelle de projet - Automatisation **POINTS FORTS :** ✅ Hautement personnalisable ✅ Automatisation puissante **FAIBLESSES :** ❌ Courbe d'apprentissage élevée ❌ Coûteux pour les petites équipes ::: :::: ::::VerticalSplit{layout="right"} :::VerticalSplitItem **📋 ASANA** *Plateforme de collaboration d'équipe* **FONCTIONNALITÉS CLÉS :** - Gestion des tâches - Collaboration d'équipe **POINTS FORTS :** ✅ Interface conviviale ✅ Excellente application mobile **FAIBLESSES :** ❌ Rapports limités ❌ Diagrammes de Gantt basiques ::: :::VerticalSplitItem **📊 MONDAY.COM** *Système d’exploitation de travail* **FONCTIONNALITÉS CLÉS :** - Gestion visuelle de projet - Automatisation **POINTS FORTS :** ✅ Hautement personnalisable ✅ Automatisation puissante **FAIBLESSES :** ❌ Courbe d'apprentissage élevée ❌ Coûteux pour les petites équipes ::: :::: ::::: ::::::ExpandableHeading{isOpen="true"} # Expandable Heading 1 # Heading 1 :::ExpandableHeading{isOpen="true"} # Expandable Heading 1 Expandable Heading 1 Content ::: ## Heading 2 :::ExpandableHeading{isOpen="true"} ## Expandable Heading 2 Expandable Heading 2 Content ::: ### Heading 3 :::ExpandableHeading{isOpen="true"} ### Expandable Heading 3 Expandable Heading 3 Content ::: ::::CodeDrawer{title="FOR ANCHOR LINK" isResponseExpanded="true" autoGeneratedAnchorSlug="for-anchor-link" legacyHash="DYUowcLdTqSSaiu3LFJrp"} :::CodeblockTabsExamples ```javascript ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: :::: :::ApiMethodV2 ```json { "name": "Get Cakes", "method": "GET", "url": "https://api.cakes.com", "description": "Get a cake by its ID", "tab": "examples", "examples": { "languages": [ { "id": "mVaRHN9tsgTJ5jcDGebkl", "language": "javascript", "code": "var myHeaders = new Headers();\nmyHeaders.append(\"Accept\", \"application/json\");\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nvar raw = JSON.stringify({\n \"id\": \"String\"\n});\n\nvar requestOptions = {\n method: 'GET',\n headers: myHeaders,\n body: raw,\n redirect: 'follow'\n};\n\nfetch(\"https://api.cakes.com\", requestOptions)\n .then(response => response.text())\n .then(result => console.log(result))\n .catch(error => console.log('error', error));", "customLabel": "" } ], "selectedLanguageId": "mVaRHN9tsgTJ5jcDGebkl" }, "results": { "languages": [ { "id": "48-lHFOPQ_Gm4DYt2qdK8", "language": "200", "code": "{\n \"name\": \"Cake's name\",\n}", "customLabel": "" }, { "id": "OyEI76OC-gXGf5L_8jfYu", "language": "404", "code": "{\n \"message\": \"Ain't no cake like that.\"\n}", "customLabel": "" } ], "selectedLanguageId": "48-lHFOPQ_Gm4DYt2qdK8" }, "request": { "pathParameters": [], "queryParameters": [], "headerParameters": [], "bodyDataParameters": [ { "name": "id", "kind": "required", "type": "string", "description": "ID of the cake to get" } ], "formDataParameters": [] }, "currentNewParameter": { "label": "Body Parameter", "value": "bodyDataParameters" }, "hasTryItOut": false, "autoGeneratedAnchorSlug": "get-cakes", "legacyHash": "Wv3IS_9wA7m2IjbsIWsVa" } ``` ::: | Heading 1 | Heading 2 | Heading 3 | | --------- | --------- | --------- | | Heading 1 | Heading 2 | Heading 3 | | | | | | | | | ::::hint{type="info"} # Heading 1 ## Heading 2 ### Heading 3 :::ExpandableHeading{isOpen="true"} # Expandable Heading 1 Content ::: :::ExpandableHeading{isOpen="true"} ## Expandable Heading 2 Content ::: :::ExpandableHeading{isOpen="true"} ### Expandable Heading 3 Content ::: :::: *** :::::VerticalSplit{layout="middle"} :::VerticalSplitItem # Heading 1 ## Heading 2 ### Heading 3 ::: ::::VerticalSplitItem :::ExpandableHeading{isOpen="true"} # Exp Heading 1 Content ::: :::ExpandableHeading{isOpen="true"} ## Exp Heading 2 Content ::: :::ExpandableHeading{isOpen="true"} ### Exp Heading 3 Content ::: :::: ::::: :::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem # Heading 1 ::: :::LinkArrayItem ## Heading 2 ::: :::LinkArrayItem ### Heading 3 ::: ::::LinkArrayItem :::ExpandableHeading{isOpen="true"} # Exp Heading 1 Content ::: :::: ::::LinkArrayItem :::ExpandableHeading{isOpen="true"} ## Exp Heading 2 Content ::: :::: ::::LinkArrayItem :::ExpandableHeading{isOpen="true"} ### Exp Heading 3 Content ::: :::: ::::: :::::WorkflowBlock :::WorkflowBlockItem # Heading 1 # Heading 1 ::: :::WorkflowBlockItem ## Heading 2 ## Heading 2 ::: :::WorkflowBlockItem ### Heading 3 ### Heading 3 ::: ::::WorkflowBlockItem :::ExpandableHeading{isOpen="true"} # Expandable Heading 1 Content ::: :::: ::::WorkflowBlockItem :::ExpandableHeading{isOpen="true"} ## Expandable Heading 2 Content ::: :::: ::::WorkflowBlockItem :::ExpandableHeading{isOpen="true"} ### Expandable Heading 3 Content ::: :::: ::::WorkflowBlockItem :::ApiMethodV2 ```json { "name": "Get Cakes", "method": "GET", "url": "https://api.cakes.com", "description": "Get a cake by its ID", "tab": "examples", "examples": { "languages": [ { "id": "DnB2O2v-erUYVxkjSFCYJ", "language": "javascript", "code": "var myHeaders = new Headers();\nmyHeaders.append(\"Accept\", \"application/json\");\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nvar raw = JSON.stringify({\n \"id\": \"String\"\n});\n\nvar requestOptions = {\n method: 'GET',\n headers: myHeaders,\n body: raw,\n redirect: 'follow'\n};\n\nfetch(\"https://api.cakes.com\", requestOptions)\n .then(response => response.text())\n .then(result => console.log(result))\n .catch(error => console.log('error', error));", "customLabel": "" } ], "selectedLanguageId": "DnB2O2v-erUYVxkjSFCYJ" }, "results": { "languages": [ { "id": "tQssi9kgWLWlBnNQWWD-a", "language": "200", "code": "{\n \"name\": \"Cake's name\",\n}", "customLabel": "" }, { "id": "dZsc_rMXK4PAemHrcm7RI", "language": "404", "code": "{\n \"message\": \"Ain't no cake like that.\"\n}", "customLabel": "" } ], "selectedLanguageId": "tQssi9kgWLWlBnNQWWD-a" }, "request": { "pathParameters": [], "queryParameters": [], "headerParameters": [], "bodyDataParameters": [ { "name": "id", "kind": "required", "type": "string", "description": "ID of the cake to get" } ], "formDataParameters": [] }, "currentNewParameter": { "label": "Body Parameter", "value": "bodyDataParameters" }, "hasTryItOut": false, "autoGeneratedAnchorSlug": "get-cakes-1", "legacyHash": "v5qqxMRupxBeXAeUoK-zL" } ``` ::: :::: ::::: :::::Tabs ::::Tab{title="Headings"} # Heading 1 ## Heading 2 ### Heading 3 :::ApiMethodV2 ```json { "name": "Get Cakes", "method": "GET", "url": "https://api.cakes.com", "description": "Get a cake by its ID", "tab": "examples", "examples": { "languages": [ { "id": "HFa4RVoV8vPdJdlkIEVvC", "language": "javascript", "code": "var myHeaders = new Headers();\nmyHeaders.append(\"Accept\", \"application/json\");\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nvar raw = JSON.stringify({\n \"id\": \"String\"\n});\n\nvar requestOptions = {\n method: 'GET',\n headers: myHeaders,\n body: raw,\n redirect: 'follow'\n};\n\nfetch(\"https://api.cakes.com\", requestOptions)\n .then(response => response.text())\n .then(result => console.log(result))\n .catch(error => console.log('error', error));", "customLabel": "" } ], "selectedLanguageId": "HFa4RVoV8vPdJdlkIEVvC" }, "results": { "languages": [ { "id": "pidnOYeHg13H7G58SqWyV", "language": "200", "code": "{\n \"name\": \"Cake's name\",\n}", "customLabel": "" }, { "id": "yosTKnt_oS2Ycc13eoBY0", "language": "404", "code": "{\n \"message\": \"Ain't no cake like that.\"\n}", "customLabel": "" } ], "selectedLanguageId": "pidnOYeHg13H7G58SqWyV" }, "request": { "pathParameters": [], "queryParameters": [], "headerParameters": [], "bodyDataParameters": [ { "name": "id", "kind": "required", "type": "string", "description": "ID of the cake to get" } ], "formDataParameters": [] }, "currentNewParameter": { "label": "Body Parameter", "value": "bodyDataParameters" }, "hasTryItOut": false, "autoGeneratedAnchorSlug": "get-cakes-2", "legacyHash": "fVquLFf10AQIwEz-nlMXM" } ``` ::: :::: ::::Tab{title="Expandable Headings"} :::ExpandableHeading{isOpen="true"} # Expandable Heading 1 Content ::: :::ExpandableHeading{isOpen="true"} ## Expandable Heading 2 Content ::: :::ExpandableHeading{isOpen="true"} ### Expandable Heading 3 Content ::: :::ApiMethodV2 ```json { "name": "Get Cakes", "method": "GET", "url": "https://api.cakes.com", "description": "Get a cake by its ID", "tab": "examples", "examples": { "languages": [ { "id": "EKueMEDKhv2CtGYsOeFRp", "language": "javascript", "code": "var myHeaders = new Headers();\nmyHeaders.append(\"Accept\", \"application/json\");\nmyHeaders.append(\"Content-Type\", \"application/json\");\n\nvar raw = JSON.stringify({\n \"id\": \"String\"\n});\n\nvar requestOptions = {\n method: 'GET',\n headers: myHeaders,\n body: raw,\n redirect: 'follow'\n};\n\nfetch(\"https://api.cakes.com\", requestOptions)\n .then(response => response.text())\n .then(result => console.log(result))\n .catch(error => console.log('error', error));", "customLabel": "" } ], "selectedLanguageId": "EKueMEDKhv2CtGYsOeFRp" }, "results": { "languages": [ { "id": "_aeF3A-AarjjSNoqI-MY9", "language": "200", "code": "{\n \"name\": \"Cake's name\",\n}", "customLabel": "" }, { "id": "SznddeG41pXIwelcxrSIh", "language": "404", "code": "{\n \"message\": \"Ain't no cake like that.\"\n}", "customLabel": "" } ], "selectedLanguageId": "_aeF3A-AarjjSNoqI-MY9" }, "request": { "pathParameters": [], "queryParameters": [], "headerParameters": [], "bodyDataParameters": [ { "name": "id", "kind": "required", "type": "string", "description": "ID of the cake to get" } ], "formDataParameters": [] }, "currentNewParameter": { "label": "Body Parameter", "value": "bodyDataParameters" }, "hasTryItOut": false, "autoGeneratedAnchorSlug": "get-cakes-3", "legacyHash": "4fk-sVhJXwZRlGE7nQ7k5" } ``` ::: :::: ::::: ::::::