Basculer

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>