- Passer au contenu principal
- Passer à « À propos de ce site »

# Basculer

- Documentation
- Questions ou commentaires?

## Intention

Plugiciel qui permet un lien à basculer des éléments entre les états activé et désactivé.

Plugin Setup Exemple simple Details Basculer groupe Accordion Conserver l'état de bascule

Needs translation

## Plugin Setup

Adding the `.wb-toggle` CSS class to any element will turn it into a toggle element. The behaviour of this toggle element is then controlled by the `data-toggle` attribute which takes a JavaScript object of properties:

Property | Purpose
--- | ---
`selector` | CSS selector that specifies the elements the toggle element controls. If no CSS selector is supplied, the toggle element controls itself.
`parent` | CSS selector that causes the toggle element to only control elements within a given parent element.
`group` | CSS selector that groups multiple toggle elements together and only allows one of the elements to be open at a time.
`persist` | Causes a toggle element to remember its current state and re-apply it when the page reloads. Supports the following values: session: toggle state will persist until the user closes their browser window or tab. local: toggle state will persist even after the browser window or tab is closed.
`print` | Causes a toggle element to turn the elements it controls on or off when the page is printed. Supports the following values: on: elements will be set to "on" toggle state for printing. off: elements will be set to "off" toggle state for printing.
`type` | Causes a toggle element to only turn the elements it controls on or off. Supports the following values: on: toggle element will only turn elements to the "on" toggle state. off: toggle element will only turn elements to the "off" toggle state.
`state` (v4.0.11+) | Sets the initial state of a toggle element. Supports the following values: off (default): Toggle element initial state is "off" on: Toggle element initial state is "on"
`stateOn` | CSS class that's added to elements when they are toggled on. Defaults to "on".
`stateOff` | CSS class that's added to elements when they are toggled off. Defaults to "off".

For example, the following element will always toggle on elements with the `.foo` CSS class that are contained in a parent with the `.bar` CSS class. In addition, the elements it controls will be toggled on when the page is printed.

    <button type="button" class="wb-toggle" data-toggle='{"type": "on", "selector": ".foo", "parent": ".bar", "print": "on"}'>Turn on</button>

## Exemple simple

## Details

Exemple 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Exemple 2

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Exemple 3

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

## Basculer groupe

Cette paramètre `group` restreint bascule groupées d'avoir un seul des éléments actifs à un moment un peu comme le comportement de case à cocher groupées.

Exemple 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Exemple 2

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Exemple 3

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

## Accordéon

La fonction de basculement de groupe du plugin peut également être utilisé pour créer un accordéon:

Example 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Example 2

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Exemple 3

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

## Conserver l'état de bascule

L'état de bascule de l'élément `details` ci-desous persistra tant que le fureteur (ou onglet) demeure ouvert.

Exemple 1

Le contenu d'exemple qui fournit plus de détails.

Tasses de café bues par chaque député
Nom | Tasses | Type de café | Sucre?
--- | --- | --- | ---
T. Sexton | 10 | Expresso | Non
J. Dinnen | 5 | Déca | Oui

Date de modification :
  2015-04-22