Description
Toggle allows for toggling between 2 different attribute values. For instance to show or hide a sidebar with a CSS class on the body tag.
Documentation
The toggle pattern can be used to toggle attribute values for objects. It is most commonly used to toggle a CSS class.
If a user clicks on the Start working link the active class is added
to the div. If the link is clicked again the active class is removed
again. You can also use shorthand notation for this pattern:
The default attribute is class, so you do not need to specify that manually.
When updating attributes the value is set if the attribute does not exist or has a different value, or removed if the attribute already has the provided value. This can be used to check the selected state of a checkbox:
If you are manipulating the class attribute you can specify multiple
classes separated by spaces to toggle multiple classes.
On the first click the inactive class will be removed and active
will be added. On the next click active will be removed again and
active restored. All listed classes will be toggled at the same time.
Remembering the state
Sometimes you need to remember the toggle state of an element. For
example when you use a toggle to hide or show a sidebar you do not want
the sidebar to reappear on every page (re)load. This can be done by
telling the toggle pattern to store the state of an element using the
store parameter.
To use this you requirements must be met:
- the element must have an
id - The browser must support Web Storage
The possible values for the store parameter are:
none: do not remember the toggle state (default).local: remember the state as part of the local storage.session: remember the status as part of the session storage.