Toggle Switch

This component provides a way to design your own toggle switch for a variety of use cases. It works seeemlessly with the content switcher component for switching between two variations of elements / content.

Option Controls

Default State

The toggle switch is a styled checkbox that can be in two states, checked or unchecked. Checked meaning the toggle control will be over to the right. On page load, the toggle can start in either position.

Switch Function

Currently the toggle switch has two built-in functions. To toggle elements inside content switchers or to toggle classes on any elements. (There is also the option to set the function to ‘none’ if you simply want to design a switch to use for your own custom purposes)

Toggle Content Switchers

When using the switch to toggle elements with the content switchers, the switch is used to toggle visibility between the first two elements inside a content switcher. You can choose for the toggle switch to control all the Content Switchers that are inside the same section, or to add a custom selector if you want to target just one individually.

Toggle Classes

Adding and removing classes from elements is a common way of turning on/off styles on elements. For eg, an elements that is originally hidden can be revealed with a click by making it so the class that adds the visibility is toggled on/off when the toggle switch is clicked.

The requirement is to choose the selector of the element that you wish to toggle the class and then to choose the name of the class you wish to toggle when clicked.

Styling Controls

The label text can be customised and styled in the usual way. They can also be removed completely by just deleting the text from the textfield.

The style controls for the switch itself can be found in the Switch tab where you can visually design the toggle switch.

The colours tab allows you to change the colours all the seperate parts of the switch in both the ‘unchecked’ and ‘checked’ state.

Oxygen Elements Library

Pre-built pricing tables with price switcher can be copied and pasted from here using Hydrogen Pack or Hydrogen Paste.