Commit 5a7e0475 authored by Hugues's avatar Hugues

Merge branch '#73-collapse-FixAffichage' into develop

parents 46bb6867 cacfae4d
//
// Collapse
// --------------------------------------------------
// variables
$border-color-collapse-focus: $link-color !default;
$expand-symbol-closed: '+ ' !default;
$expand-symbol-open: '- ' !default;
$expandmore__button-padding: 0 1em !default;
$expand-symbol-size: .9em !default;
$expand-symbol-closed: '▼' !default;
$expand-symbol-open: '▲' !default;
$expand-symbol-position-v: top !default;
$expand-symbol-position-v-value: .2em !default;
$expand-symbol-position-h: left !default;
$expand-symbol-position-h-value: 0 !default;
$expandmore__to_expand-padding: 0 1.4em !default;
@import "style-collapse";
//
// Collapse
// --------------------------------------------------
.js-to_expand[aria-hidden=true],
.js-to_expand[data-hidden=true] {
display: none;
}
.expandmore__button {
vertical-align: baseline;
background: transparent;
font-size: inherit;
color: inherit;
border: 0;
padding: $expandmore__button-padding;
&:focus {
outline: thin dotted;
border-color: $border-color-collapse-focus;
......@@ -18,20 +23,33 @@
// // Exemple de règles pour visualiser la fonctionalité
// // plier /déplier
.js-expandmore {
position: relative;
}
.expandmore__symbol {
width: .85em;
display: inline-block;
vertical-align: top;
font-size: $expand-symbol-size;
line-height: 1;
position: absolute;
#{$expand-symbol-position-v} : $expand-symbol-position-v-value;
#{$expand-symbol-position-h} : $expand-symbol-position-h-value;
}
.expandmore__symbol:before {
content : $expand-symbol-closed;
}
.expandmore__button[aria-expanded=true] .expandmore__symbol:before ,
.expandmore__button[data-expanded=true] .expandmore__symbol:before {
content : $expand-symbol-open;
}
.expandmore__to_expand {
padding: $expandmore__to_expand-padding;
}
// bouton "tout déplier"
.no-js .js-expandmore-all {
display: none;
}
# Collapse
Présentation
------------
-------------------------------------------------------------------
Collapse est un composant html/js/css qui permet de plier et déplier des contenus. Une option permet d'indiquer les éventuels contenus dépliés par défaut.
Collapse est un composant html/js/css qui permet de plier et déplier des contenus. Une option permet dindiquer les éventuels contenus dépliés par défaut.
Si javascript n'est pas chargé dans le navigateur, tous les contenus sont affichés.
Si javascript nest pas chargé dans le navigateur, tous les contenus sont affichés.
Note : ce module a été développé par [Nicolas Hoffmann](http://a11y.nicolas-hoffmann.net/hide-show/).
Utilisation
-----------
-------------------------------------------------------------------
Les attributs nécessaires à la dynamique d'ouverture/fermeture et à son accessibilité sont injectés par le script.
Les attributs nécessaires à la dynamique douverture/fermeture et à son accessibilité sont injectés par le script.
Pour que le script fonctionne correctement, le code html doit répondre à deux impératifs :
1. L'élément déclencheur doit porter la class `js-expandmore` et l'élément à montrer/cacher doit porter la class `js-to_expand`.
1. L’élément déclencheur doit porter la class `js-expandmore` et l’élément à montrer/cacher doit porter la class `js-to_expand`.
2. Ces deux éléments doivent être voisins immédiats dans la source.
Les styles présents dans le module sont les styles minimaux pour le bon fonctionnement du module.
Il est possible d’ajouter un bouton pour déplier / replier tous les blocs de la page. Ce bouton doit porter la classe `js-expandmore-all`.
Le texte affiché dans ce bouton se configure dans le fichier javascript.
### Script associé
Pour que ce module fonctionne, le script associé doit être appelé dans le pied de page, avant la fermeture du `body`.
Note : copier le script présent dans le module à l'endroit où sont rangés les autres scripts.
Note : copier le script présent dans le module à l’endroit où sont rangés les autres scripts.
### Configuration
Les variables proposées dans ce module sont :
- `$border-color-collapse-focus` : couleur du symbole, sa valeur par défaut est `$link-color`;
- `$expandmore__button-padding` : padding du bouton, sa valeur par défaut est `0 1em`;
- `$expand-symbol-size` : taille du symbole, sa valeur par défaut est `.9em`;
- `$expand-symbol-closed` : symbole fermé, sa valeur par défaut est `'▼'`;
- `$expand-symbol-open` : symbole ouvert, sa valeur par défaut est `'▲'`;
- `$expand-symbol-position-v` : position verticale du symbole, sa valeur par défaut est `top`;
- `$expand-symbol-position-v-value` : valeur de la position verticale, sa valeur par défaut est `.2em`;
- `$expand-symbol-position-h` : position horizontale du symbole, sa valeur par défaut est `left`;
- `$expand-symbol-position-h-value` : valeur de la position horizontale, sa valeur par défaut est `0`;
- `$expandmore__to_expand-padding` : padding de la zone dépliable, sa valeur par défaut est `0 1.4em`;
Exemple
-------
-------------------------------------------------------------------
````html
```html
<button class="js-expandmore-all btn">Tout déplier</button>
<h3 class="js-expandmore">Question 1</h3>
......@@ -47,8 +65,9 @@ Exemple
<p>Le contenu caché peut être constitué de tout élément html : paragraphes, titres, tableaux, images…</p>
</div>
<h3 class="js-expandmore">Une autre question ?</h3>
<h3 class="js-expandmore">Faut-il une autre question sur plusieurs lignes pour vérifier le comportement du symbole d'ouverture et de fermeture ?</h3>
<div class="js-to_expand is-opened">
<p>Oui, il le faut</p>
<p>Ce collapse est ouvert par défaut et peut être replié.</p>
</div>
......@@ -56,4 +75,4 @@ Exemple
<div class="js-to_expand">
<p>Le contenu caché peut être constitué de tout élément html : paragraphes, titres, tableaux, images…</p>
</div>
````
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment