Développer/réduire - Configuration de conception de Canada.ca: Conception de Canada.ca

Quand l'utiliser

Le modèle développer/réduire peut être utilisé dans deux situations :

1. Présenter un choix entre des réponses mutuellement exclusives

Utilisez ce modèle lorsque les gens doivent obtenir des réponses différentes en fonction de leur situation et lorsque ces réponses sont mutuellement exclusives.

Cela réduit le risque que les gens pensent à tort qu’ils ont obtenu la réponse qui s’applique à leur situation.

2. Présenter des renseignements secondaires

Utilisez ce modèle pour éviter que le contenu secondaire n'interfère avec la tâche principale.

Il peut s'agir d'un contenu qui s'applique à la plupart des gens, mais que seules quelques personnes peuvent avoir besoin d'utiliser (par exemple, une déclaration de confidentialité ou des renseignements supplémentaires qui ne sont pas nécessaires pour accomplir la tâche principale).

Il peut également s'agir d'un contenu qui ne s'applique qu'à une minorité de personnes (par exemple lorsqu'il existe des renseignements spécifiques destinées à un public spécifique).

Utiliser les boutons développer tout/réduire tout

Description longue

Deux boutons gris positionnés côte à côte. Les deux ont des fonds gris. Le bouton de gauche contient le texte suivant : Développer tout. Le bouton de droite contient le texte suivant : Réduire tout.

L’option développer tout/réduire tout ne doit être employée que lorsqu’il peut être avantageux pour les utilisateurs d’afficher tous les renseignements en même temps. Ce serait notamment le cas d’une page ayant de nombreuses modèles développer/réduire dans lesquelles se trouvent :

• des renseignements secondaires, dont l’affichage complet faciliterait la consultation rapide pour trouver un élément précis, qui n’est pas explicitement mentionné dans l’intertitre accompagnant le modèle développer/réduire.
  • par exemple : Une page de mises à jour dont les intertitres correspondent aux dates et dont les mises à jour sont contenues dans le modèle développer/réduire.
• des réponses potentielles, dont plusieurs peuvent s’appliquer à l’utilisateur. Dans ce cas, afficher toutes les réponses en même temps peut aider l’utilisateur à consulter rapidement les renseignements et à trouver ce dont il a besoin.

Quoi éviter

N'utilisez pas ce modèle si :

• la majorité des gens ont besoin du contenu pour accomplir la tâche principale de la page (sauf si les réponses sont mutuellement exclusives);
• les gens doivent répondre à plusieurs questions pour obtenir la réponse qui s'applique à eux (utilisez plutôt des questions interactives);
• l'une des réponses mutuellement exclusives comporte plusieurs sous-tâches ou plus d'une page de contenu à l'appui (utilisez plutôt des questions interactives).

Spécifications de conception

Modèle développer/réduire

Par défaut, tous les modèles doivent être fermés.

Copiez le code pour obtenir le modèle développer/réduire.

Boutons développer tout/réduire tout

En cliquant sur chaque bouton :

• développer tout devrait ouvrir tous les modèles, exposant le contenu préalablement masqué;
• réduire tout devrait fermer tous les modèles.

Copiez le code pour obtenir les boutons développer tout/réduire tout.

Comment mettre en oeuvre

Remarques sur la mise en œuvre

• Les renseignements contenus dans les modèles développer/réduire sont retenus lors de recherches sur les navigateurs Web.
• Les navigateurs Web modernes prennent en charge la fonction de recherche dans la page, même si le modèle développer/réduire n’est pas ouvert. Ils affichent automatiquement le contenu pour y trouver des résultats.
• Cliquer pour ouvrir un modèle développer/réduire est aussi accessible que cliquer sur un lien pour les utilisateurs.

Mise en œuvre

Évaluez ce qui convient le mieux pour la création de votre page.

• Balise détails fermée – Plugiciels – Documentation – Boîte à outils de l’expérience Web
• Détails – Système de design GC
• Groupes de Bouton (Horizontale) – GCWeb

Présenter un choix entre des réponses mutuellement exclusives

<h3>Déterminer si vous êtes dans une situation de garde partagée</h3>
<p>L'enfant passe-t-il son temps :</p>
<ul class="list-unstyled">
 <li>
<details>
 <summary>environ de façon égale avec chaque deux parents</summary>
 <p>Si l'enfant partage son temps environ de façon égale entre les deux parents, les deux parents sont considérés avoir la <strong>garde partagée</strong> de cet enfant...</p>
</details>
 </li>
 <li>
<details>
 <summary>avec vous la plupart du temps</summary>
 <p>Si l'enfant vit avec vous la plupart du temps, vous êtes considéré avoir la <strong>garde principale</strong> pour les besoins de l'Allocation canadienne pour enfants...</p>
</details>
 </li>
 <li>
<details>
 <summary>avec l'autre parent la plupart du temps</summary>
 <p>Si l'enfant vit avec l'autre parent la plupart du temps, l'autre parent est considéré avoir la <strong>garde principale</strong> pour les besoins de l'Allocation canadienne pour enfants...</p>
</details>
 </li>
</ul>

Présenter des renseignements secondaires

<h3>Estimer vos paiements</h3>
<p>Utilisez l'estimateur pour planifier votre budget.</p>
<p>Par exemple, vous pouvez utiliser le montant que vous pourriez recevoir si :</p>
<ul>
 <li>vous avez un nouvel enfant</li>
 <li>votre revenu change</li>
 <li>vous débutez ou terminez une situation de garde partagée</li>
</ul>
<details>
 <summary>Voir le calcul mathématique sur lequel sont basés les paiements de l'Allocation canadienne pour enfants</summary>
 <h3>Comment sont calculés les paiements</h3>
 <p>Chaque mois, les paiements de l'Allocation canadienne pour enfants est ajusté en fonction :</p>
 <ul>
<li>du nombre d'enfants dont vous avez la charge</li>
<li>de l'âge de vos enfants</li>
<li>de votre situation matrimoniale</li>
<li>de votre revenu familial net de l'année précédente</li>
 </ul>
 <p>...</p>
</details>

Grâce aux boutons développer tout/réduire tout

<h4>[Information par catégorie ]</h4>
<div class="btn-group mrgn-bttm-sm mrgn-tp-md">
  <button type="button" class="btn btn-default wb-toggle" data-toggle="{&quot;selector&quot;: &quot;details&quot;, &quot;parent&quot;: &quot;#expand-collapse&quot;, &quot;type&quot;: &quot;on&quot;}">/Développer tout</button>
  <button type="button" class="btn btn-default wb-toggle" data-toggle="{&quot;selector&quot;: &quot;details&quot;, &quot;parent&quot;: &quot;#expand-collapse&quot;, &quot;type&quot;: &quot;off&quot;}">/Réduire tout</button>
</div>
<div id="expand-collapse">
  <details>
    <summary>Sujet 1 qui s’applique à plusieurs</summary>
    <ul>
      <li>[Lien vers la tâche 1]</li>
      <li>[Lien vers la tâche 2]</li>
      <li>[Lien vers la tâche 3 ]</li>
      <li>...</li>
    </ul>
  </details>
  <details>
    <summary>Sujet 2 qui s’applique à plusieurs</summary>
    <ul>
      <li>[Lien vers la tâche 1]</li>
      <li>[Lien vers la tâche 2]</li>
      <li>[Lien vers la tâche 3 ]</li>
      <li>...</li>
    </ul>
  </details>
  <details>
    <summary>Sujet 3 qui s’applique à plusieurs</summary>
    <ul>
      <li>[Lien vers la tâche 1]</li>
      <li>[Lien vers la tâche 2]</li>
      <li>[Lien vers la tâche 3]</li>
      <li>...</li>
    </ul>
  </details>
  <details>
    <summary>...</summary>
  </details>
</div>

Recherche et justification

Nous avons testé avec succès l'utilisation du modèle développer/réduire pour encourager les gens à choisir entre des options mutuellement exclusives lors de deux projets d'optimisation réalisés avec l'Agence de revenu du Canada.

• Utiliser le modèle afficher/masquer (développer/réduire) pour faire des choix (blogue)
• Résumé de recherche : Communiquer avec l’ARC

Derniers changements

2025-11-25

Ajout de renseignements sur les contextes justifiant d’employer les boutons développer tout/réduire tout. Ajout de remarques sur la mise en œuvre.

2019-11-28

Les directives ont été modifiées pour permettre d'afficher/masquer du contenu pour des réponses qui sont mutuellement exclusives.