Toggle Switch

This element provides a way to build your own toggle switch. Ideal for switching between two or multiple variations of elements/content, based on user selection.

For more flexibility, the ‘content switcher’ which switches out the versions of the content is a separate element. This way the one toggle can be used to switch out multiple elements on the same page without any limitation on design/layout.

Supports Multiple Variants

The toggle switch has two modes, either design your own switch (with labels positioned either side) or allow for multiple labels with animated active styles on the labels themselves.

Toggle Type – Choose either to display two labels and a stylable toggle switch, or multiple labels. if using multiple levels, any number of options can be added in manually or a query loop can be used to populate dynamically.

Which content switcher? – You can either set the toggle switch to interact with all content switchers found in the same section. (this is for convenience so you don’t need to provide the selectors for nearby content switchers), or you can enter the selector of the content switcher you are wishing to use.

Labels – Set the label text for each option.

Styling

Depending on which toggle type you choose, you’ll have different settings for the styles. Either styling the animated toggle switch or the animated labels.