# Alertes repliables

Questions ou commentaires?

## But

Ce plugiciel a pour but de permettre à la classe `.alert` d'être utilisé avec un bloc `details` / `summary` afin de permettre la création d'alertes qui peuvent être repliées par l'utilisateur. Le plugiciel utilise la technologie « Local Storage » pour permettre au navigateur Web de se rappeler de l'état de l'alerte (ouverte ou repliées).

## Exemples pratiques

- Exemple anglais
- Exemple français

## Comment mettre en œuvre

Pour utiliser les alertes repliables, un bloc `details`/`summary` doit posséder ce qui suit :

- L'élément `details` doit posséder :

  - Une classe alerte valide :
    p. ex. `alert alert-success`.

  - Un attribut `id` d'une valeur unique. Réutiliser cette valeur sur toutes les pages où il est souhaité que l'état de l'alerte soit maintenu. Par exemple, si l'utilisateur replie une alerte avec un attribute `id` d'une valeur de « alerte-123 » sur une page A et navigue ensuite vers une page B où il existe aussi une alerte dont le `id` est de « alerte-123 », l'arte de la page B sera déjà repliée lorsque l'utilisateur chargera la page.

  - Un attribut `open` pour que son état par défaut soit ouvert. Omettre l'attribut `open` rendera l'état par défaut replié.

- L'élément `summary` doit posséder une classe qui correspond à celle de son élément enfant pour que le pointeur (le triangle) soit de la bonne taille. Par exemple, lorsque l'enfant de `summary` est un `h3`, `summary` doit avoir une classe `h3`.

- Finalement, toute alerte repliée devrait être contenue à l'intérieur d'un élément `section` ou `aside` et l'enfant de l'élément `summary` devrait être un élément titre.

    <section>
    	<details class="alert alert-success" id="alert-success" open="open">
    		<summary class="h2">
    			<h2>Bien joué!</h2>
    		</summary>
    		<p>Vous avez lue une <a href="#" class="alert-link">alerte importante</a>.</p>
    	</details>
    </section>

## Code source

Code source du plugiciel Alertes repliables sur GitHub

Date de modification :
  2016-06-09