Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Accordéons

Les accordéons permettent de créer des contenus qui peuvent être révélés ou masqués.

Conseils

Le composant d’accordéon permet aux utilisateurs d’élargir ou de réduire le contenu. Il est composé d’un ensemble de titres empilés verticalement sur lesquels l’utilisateur peut cliquer pour développer des rubriques masquées. Vous ne devez jamais cacher d’informations ou de fonctions essentielles dans un composant d’accordéon, car les utilisateurs pourraient avoir du mal à les trouver et à les utiliser. Les accordéons doivent être utilisés avec modération et uniquement dans les cas appropriés. Les accordéons peuvent être utilisés pour :

  • Présenter un contenu secondaire : Il est possible d’utiliser des accordéons pour présenter du contenu qui n’interfère pas avec la tâche principale. Par exemple : des détails supplémentaires ou des informations qui ne s’appliquent qu’à un petit nombre de personnes ou à un public précis.
  • Présenter un choix entre des réponses mutuellement exclusives : Lorsque l’utilisateur est invité à choisir entre des réponses mutuellement exclusives, les accordéons permettent de s’assurer qu’il ne voit que la réponse qui lui convient. Cela permet d’éviter qu’il consulte des informations qui ne correspondent pas à sa situation.

À faire

  • Utilisez des titres clairs et descriptifs pour aider les utilisateurs à comprendre ce que contiennent les rubriques masquées.
  • Activez la fonctionnalité « Ouvrir tout » pour permettre aux utilisateurs d’afficher toutes les rubriques masquées d’un seul clic.
  • Utilisez les titres <h2>, <h3> et <h4> appropriés à la structure de contenu de la page. Le composant d’accordéon les redimensionnera visuellement.

À ne pas faire

  • Ne cachez pas d’informations ou de fonctions essentielles dans un accordéon.
  • N’utilisez pas d’accordéon pour réduire un contenu très court. Privilégiez plutôt les listes ou les paragraphes.
  • N’utilisez pas d’accordéon pour réduire un contenu très long. Privilégiez plutôt la création de sections ou de pages distinctes.
  • N’utilisez pas d’accordéon pour raccourcir une page.

Accordéon

Ouvrir tout

  1. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

  2. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

  3. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

HTML

<div class="gnb-accordion-pane">
	<a href="#" class="gnb-accordion-toggleall" data-open="false">Ouvrir tout</a>
	<ol class="gnb-accordion" data-aria-accordion data-multi>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Titre</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Titre</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Titre</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
	</ol>
</div>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-accordions-1.0.0.js"></script>

Accordéon avec cartes

Ouvrir tout

  1. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

  2. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

  3. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

HTML

<div class="gnb-accordion-pane">
	<a href="#" class="gnb-accordion-toggleall" data-open="false">Ouvrir tout</a>
	<ol class="gnb-accordion-cards" data-aria-accordion data-multi>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<h4>Titre</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
					porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
					interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
					risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
				</p>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<h4>Titre</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
					porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
					interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
					risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
				</p>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<h4>Titre</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
					porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
					interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
					risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
				</p>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
	</ol>
</div>  

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-accordions-1.0.0.js"></script>

Accordéon avec étapes

Ouvrir tout

  1. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

  2. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

  3. Élément d'accordéon

    Titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.

    Appel à l'action

HTML

<div class="gnb-accordion-pane">
	<a href="#" class="gnb-accordion-toggleall" data-open="false">Ouvrir tout</a>
	<ol class="gnb-accordion-steps" data-aria-accordion data-multi>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Titre</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Titre</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
		<li class="gnb-accordion-container">
			<div class="gnb-accordion-heading">
				<h3>Élément d'accordéon</h3>
			</div>
			<div class="gnb-accordion-panel">
				<div class="group-description">
					<h4>Titre</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula
						porttitor elit sed dictum. Duis mi enim, condimentum sit amet tristique
						interdum, luctus ut magna. Praesent non sollicitudin nunc. Donec interdum et
						risus vestibulum gravida. Donec posuere tortor ut orci accumsan imperdiet.
					</p>
				</div>
				<p><a href="#">Appel à l'action</a></p>
			</div>
		</li>
	</ol>
</div>

<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-accordions-1.0.0.js"></script>