Collapsable

Vue d'ensemble

Similaire au composant détails, avec deux différences. La sémantique et l'utilisation d'un <input> de type type="checkbox" ou type="radio".

En effet détails est spécialisé dans les systèmes de type FAQ. Sa sémantique se veut spécialisée et optimisée pour le SEO. Collapsable se veux plus générique et trouvera sa place, pour mettre en place un système d'accordéon. Il est également prêt pour l'accessibilité.

L'élément qui devra être caché ou affiché pourra être de n'importe quelle balise HTML valide. Que ce soit, une simple <div>, une liste <ul>, une <span> ou même un bouton. A vous de choisir.

Très simple à mettre en place, il vous suffit juste de placer un <label> et le lié à un <input> avec la classe .collapsable-toggler et de choisir votre conteneur en lui assignant la classe .collapsable. Il vous reste plus qu'à configurer correctement les attributs natifs et les attributs aria pour l'accessibilité.

SECTION 1

Contenu section 1

SECTION 2

Contenu section 2

picsum

SECTION 3

Contenu section 3

Un composant Collaspable en ligne ? Ajoutez style="display: inline-block;" à votre label 
<div class="group group--vertical" style="--w:100%;">

	<label role="button" class="btn--noshadow" for="collapse-accordeon-1" aria-label="Afficher cacher section un" style="--w:100%;">
		Section 1
	</label>
	<input type="radio" id="collapse-accordeon-1" name="collapse-accordeon" class="collapsable-toggler" aria-controls="accordeon-content-1" tabindex="-1" checked>
	<div id="accordeon-content-1" class="card collapsable" style="--box-shadow: none; --border-radius:0;">
		<div class="panel">
			<h3>SECTION 1</h3>
			<p>Contenu section 1</p>

			<label role="button" class="btn--noshadow" for="collapse-list" aria-label="Afficher cacher la liste des liens en relation">
				En relation
			</label>
			<input type="checkbox" id="collapse-list" name="collapse-list" class="collapsable-toggler" aria-controls="collapsable-list-content-1">
			<ul id="collapsable-list-content-1" class="collapsable" style="--px:var(--inner-v-spacing)">
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 2</a></li>
				<li><a href="#">Lien 3</a></li>
			</ul>

		</div>
	</div>

	<label role="button" class="btn--noshadow" for="collapse-accordeon-2" aria-label="Afficher cacher section deux" style="--w:100%;">
		Section 2
	</label>
	<input type="radio" id="collapse-accordeon-2" name="collapse-accordeon" class="collapsable-toggler" aria-controls="accordeon-content-2">
	<div id="accordeon-content-2" class="card collapsable" style="--box-shadow: none; --border-radius:0;">
		<div class="panel">
			<h3>SECTION 2</h3>
			<p>Contenu section 2</p>

			<label class="btn--noshadow" for="collapse-div" aria-label="Afficher cacher la liste des liens en relation">
				<span class="link link-underline link-underline--wavy">Voir l'image</span>
			</label>
			<input type="checkbox" id="collapse-div" name="collapse-div" class="collapsable-toggler" aria-controls="collapsable-div-content-1">
			<div id="collapsable-div-content-1" class="collapsable" style="--mw:320px;">
				<img src="https://picsum.photos/300/200/" alt="picsum" width="300" height="200">
			</div>

		</div>
	</div>

	<label role="button" class="btn--noshadow" for="collapse-accordeon-3" aria-label="Afficher cacher section trois" style="--w:100%;">
		Section 3
	</label>
	<input type="radio" id="collapse-accordeon-3" name="collapse-accordeon" class="collapsable-toggler" aria-controls="accordeon-content-3">
	<div id="accordeon-content-3" class="card collapsable" style="--box-shadow: none; --border-radius:0;">
		<div class="panel">
			<h3>SECTION 3</h3>
			<p>Contenu section 3</p>

			<label class="btn--noshadow" for="collapse-span" aria-label="Afficher cacher l'astuce" style="display: inline-block;">
				<span class="link link-underline">Astuce ></span>
			</label>
			<input type="checkbox" id="collapse-span" name="collapse-div" class="collapsable-toggler" aria-controls="collapsable-span-content-1">
			<span id="collapsable-span-content-1" class="collapsable" style="--txt: var(--on-neutral-color-variation-2);">
				Un composant <b>Collaspable en ligne</b> ? Ajoutez <code><b>style</b>=<i>"display: inline-block;"</i></code> à votre <code><b>label</b></code>
			</span>

		</div>
	</div>

</div>

Comme vous pouvez le constater, il est très aisé de modifier la mise en page des éléments via l'attribut style grâce aux utilitaires fournit par Sass Swing.