Multi Switch Stack

Installation & Updates

Install the Multi Switch Stack by double-clicking on the downloaded stack file. Periodic updates are downloaded using the update facility in the Stacks Library.

Using Multi Switch

Drop the Multi Switch Stack onto your page. Switch colors are set to use custom colors by default. If you want to use any of the built in color schemes, drop the Multi Switch Colors Stack onto your page.

Think of Multi Switch consisting of three elements, the TOGGLE, the CONTENT, and the GROUP. In the case of the Toggle Switch, when a switch is in the ON position, the content is shown. When you have multiple switches and content, the GROUP ensures that only one switch is ON and only it's corresponding content is visible.

When you drop the Multi Switch Stack to your page, assign it a unique GROUP ID. This GROUP ID will be used for all TOGGLES and CONTENT associated with this GROUP.

Multi Switch Screenshot

Toggles (Switches, Radios, & Icons)

You can use any number of toggles in a group, and you can mix and match the toggle type. Toggles are styled using the control settings, which are documented below.

If you need more layout flexibility, you can move Multi Switch Toggle stacks out of the parent Multi Switch stack and place them anywhere on your page.

Switch IDs should be unique to the entire page, so take care with your naming convention.

Content

Drag and drop any stacks into the Content Stack drop area and style however you want. If you need more layout flexibility, you can move Multi Switch Content stacks out of the parent Multi Switch stack and place them anywhere on your page.

In the Content stack general settings, enter the Switch ID that controls this content, and the Group ID that the switch belongs to.

Content Mode

There are two modes for the Multi Switch Content Stack.

Normal Mode downloads all content, including images, and processes any HTML, CSS, and Javascript contained within the content stack. When this content is requested by its switch, the change is instantaneous and images are visible immediately.

Lazy Loading Mode holds the content in templates and does not download images or process any code until the switch requests this content. This is useful to prevent CSS from being processed too soon. Do not use this mode if you are nesting Multi Switch stacks.

Cookies

Cookies Settings

Cookies are optional and can be used to remember the switch state when the page is refreshed or reloaded.

Cookies can be session cookies, or persistent cookies that are set for a specified time period. If you are using the same Multi Switch stack on multiple pages, such as inside a partial, you can make the cookie available on all pages.

Since there is some concern about using cookies, Multi Switch is compatible with the Privacy Center stack. By assigning a cookie category, cookies will not be set unless that category has been enabled in Privacy Settings by the website visitor.

Stack Settings

Multi Switch Settings

Show All | Hide All

Edit Mode

Title : set a stack title. Useful when you hide the info.

Hide Info : Hide the stack info.

Disable Dark Mode Colors : If you don't use Dark Mode, you can disable Dark Mode colors here.
General Settings

Switch Group ID: set the unique ID of the switch group.

Switch Layout : Select the switch layout.
Options [ Horizontal, Vertical, Freestyle ]

Align : in horizontal layout, select the switch alignment.
Options [ Left, Center, Right, Space Evenly, Space Around, Space Between ]

Small Align : In vertical layout, you have the option to display a horizontal layout in small screens. Here you can set the alignment of the switches on small screens.
Responsive Settings

Medium : set the breakpoint for medium screens.

Large : set the breakpoint for large screens.
Margin Settings

Margin Units : set the margin units.
Option [ Pixels - px, EM - em, REM - rem, Percent - % ]

Small : set margin for small devices.

Medium : set the margin for medium devices.

Large : set the margin for large devices.
Cookies (Multi Mode)

Set a Cookie : enable or disable the cookie

Pages : set a cookie on all pages or this page only.

Cookie Type : set a session or persistent cookie.

Are you using Privacy Center? : if you are using the Privacy Center, you can enable it here.

Cookie Category : set the cookie category.
Options [ Category 1 - 6 ]

Toggle Switch Settings

Show All | Hide All

Edit Mode

Title : set a stack title. Useful when you hide the info.

Hide Info : Hide the stack info.

Disable Dark Mode Colors : If you don't use Dark Mode, you can disable Dark Mode colors here.
General Settings

Switch ID : set the unique switch ID.

Switch Mode : select the switch mode.
Options [ Multi Mode, Single Mode ]

Group ID : type in the group ID that you set in the parent Multi Switch stack settings.

Default ON : enable if this switch will be in the ON position when the page loads.
Form Settings

Use Custom Name & Value : turn this on if your switch is part of a form and you want to set a custom name and value for the switch.

Switch Name : set the switch name. This will be included if the switch is ON when the form is submitted.

Switch Value : set the switch value. This will be included if the switch is ON when the form is submitted.
Responsive Settings

Medium : set the breakpoint for medium screens.

Large : set the breakpoint for large screens.
Style Settings

Size : set the size of the Toggle Switch.
Options [ X-Small, Small, Medium (Default), Large, X-Large ]

Small on Mobile : turn on to enable small switches on small screens.

Style : select the style of the switch.
Options [ Round, Radius, Square ]

Align : set the switch alignment.

Padding Units : set the position units for the Modal offset.
Options [ Pixels - px, EM - em, REM - rem, Percent - % ]

Small : set the switch padding for small screens.

Medium : set the switch padding for medium screens.

Large : set the switch padding for large screens.
Text Settings

Enable Text : turn on to enable text inside the switch.

Text : set the text for the OFF and ON positions.

Adjust Text Size : adjust the text size up or down from the default.

Adjust Width : adjust the width of the switch.

Adjust Position : adjust the position of the text inside the switch.
Label Settings

Enable Label : turn on the enable the switch label.

Label Text : set the label text.

Label Position : set the label position.

Text Size : set the size of the label text for small, medium and large screens.

Hide Label on Small Screens : turn on to hide the label on small screens.

Color : set the color of the label for the OFF and ON position.

Dark Mode : set the Dark Mode color of the label for the OFF and ON position.

Custom Class : set a custom class for the label.
Color Scheme

Color Scheme : set the color scheme.
Options [ Blue, Red, Orange, Yellow, Green, Purple, Grey, Custom (Default) ]

Background : set the background color and dark mode background color of the switch in the OFF and ON positions.

Switch : set the switch color and dark mode switch color in the OFF and ON positions.

Inner Text : set the color and dark mode color of the inner text in the OFF and ON positions.

Toggle Radio Settings

Show All | Hide All

Edit Mode

Title : set a stack title. Useful when you hide the info.

Hide Info : Hide the stack info.

Disable Dark Mode Colors : If you don't use Dark Mode, you can disable Dark Mode colors here.
General Settings

Radio ID : set the unique radio switch ID.

Group ID : type in the group ID that you set in the parent Multi Switch stack settings.

Default ON : enable if this switch will be in the ON position when the page loads.

Disable : turn this on to disable the radio switch. The switch will be greyed out.

Size : set the size of the radio switch.
Options [ Small, Medium (Default), Large, X-Large, XX-Large, Custom ]

Small on Mobile : turn on to force small on small screens.

Style : set the radio switch style.
Options [ Round, Radius, Square ]

Align : set the switch alignment.

Padding Units : set the padding units.
Options [ Pixels - px, EM - em, REM - rem, Percent - % ]

Small : set the radio switch padding for small screens.

Medium : set the switch padding for medium screens.

Large : set the switch padding for large screens.
Form Settings

Use Custom Name & Value : turn this on if your switch is part of a form and you want to set a custom name and value for the switch.

Switch Name : set the switch name. This will be included if the switch is ON when the form is submitted.

Switch Value : set the switch value. This will be included if the switch is ON when the form is submitted.
Responsive Settings

Medium : set the breakpoint for medium screens.

Large : set the breakpoint for large screens.
Label Settings

Label : type the switch label.

Label Position : set the position of the switch label.
Options [ Left, Right, Top, Bottom ]

Text Size : set the size of the label text for each screen size.

Spacing : set the label spacing for each screen size.

Color : set the color and Dark Mode color of the label text.

Custom Class : set a custom class for the label.
Color Scheme

Color Scheme : set the color scheme.
Options [ Blue, Red, Orange, Yellow, Green, Purple, Grey, Custom (Default) ]

Background : set the background color and dark mode background color.

Border : set the color and dark mode color of the border.

Toggle Icon Settings

Show All | Hide All

Edit Mode

Title : set a stack title. Useful when you hide the info.

Hide Info : Hide the stack info.

Disable Dark Mode Colors : If you don't use Dark Mode, you can disable Dark Mode colors here.
General Settings

Switch ID : set the unique switch ID.

Switch Mode : select the switch mode.
Options [ Multi Mode, Single Mode ]

Group ID : type in the group ID that you set in the parent Multi Switch stack settings.

Default ON : enable if this switch will be in the ON position when the page loads.
Form Settings

Use Custom Name & Value : turn this on if your switch is part of a form and you want to set a custom name and value for the switch.

Switch Name : set the switch name. This will be included if the switch is ON when the form is submitted.

Switch Value : set the switch value. This will be included if the switch is ON when the form is submitted.
Icon Settings (Image Icon)

Icon Type : choose the icon type.
Options [ Image Icon, Cloud Image Icon, SVG Icon, Font Awesome Icon ]

Icon : drag and drop or browse for an image to use for your icon.

Swap Icon Image : choose a second image swap it with the first image when the switch is ON.

Icon : drag and drop or browse for an image to use for your icon.
Icon Settings (Cloud Image Icon)

Icon Type : choose the icon type.
Options [ Image Icon, Cloud Image Icon, SVG Icon, Font Awesome Icon ]

URL : set the URL of the image.

Swap Icon Image : choose a second image swap it with the first image when the switch is ON.

URL : set the URL of the image.
Icon Settings (SVG Icon)

Icon Type : choose the icon type.
Options [ Image Icon, Cloud Image Icon, SVG Icon, Font Awesome Icon ]

SVG Code : paste your SVG code.

SVG Color : enable the SVG Fill and Stroke colors.

Fill : set the SVG Fill color and Dark Mode Fill Color.

Stroke : set the SVG Stroke color and Dark Mode Stroke Color.

Swap Icon Image : choose a second image swap it with the first image when the switch is ON.

SVG Code : paste your SVG code.

SVG Color : enable the SVG Fill and Stroke colors.

Fill : set the SVG Fill color and Dark Mode Fill Color.

Stroke : set the SVG Stroke color and Dark Mode Stroke Color.
Icon Settings (Font Awesome Icon)

Icon Type : choose the icon type.
Options [ Image Icon, Cloud Image Icon, SVG Icon, Font Awesome Icon ]

Font Awesome : enter the Font Awesome icon code.

Color : set the color and dark mode color of the icon.

Line Height : set the line height.

Swap Icon Image : choose a second image swap it with the first image when the switch is ON.

Font Awesome : enter the Font Awesome icon code.

Color : set the color and dark mode color of the icon.
Icon Settings

Scale (Small) : set the size of the icon for small screens.

Scale (Medium) : set the size of the icon for medium screens.

Scale (Large) : set the size of the icon for Large screens.

Custom Class : set a custom class for the icon.
Responsive Settings

Medium : set the breakpoint for medium screens.

Large : set the breakpoint for large screens.
Style Settings

Align : set the icon alignment.

Padding Units : set the padding units.
Options [ Pixels - px, EM - em, REM - rem, Percent - % ]

Small : set the radio switch padding for small screens.

Medium : set the switch padding for medium screens.

Large : set the switch padding for large screens.

Outline Active Icon : turn on to outline the active icon.

Outline Size : set the size of the outline.

Color : set the color and Dark Mode color of the outline.

Shadow Type : set a text or drop shadow.

Color : set the color and Dark Mode color of the shadow.

Offset : set the X & Y shadow offset.

Blur : set the shadow blur.
Label Settings

Enable Label : turn on to enable the icon label.

Label Text : set the label text.

Label Position : set the position of the label.
Options [ Left, Right, Top, Bottom ]

Text Size : set the size of the label text for each screen size.

Spacing : set the spacing of the label text for each screen size.

Color : set the color and Dark Mode color of the label text.

Underline When Active : turn on to underline the active icon.

Custom Class : set a custom class for the icon label.

Multi Switch Content Settings

Show All | Hide All

Edit Mode

Title : set a stack title. Useful when you hide the info.

Hide Info : hide the stack info.

Hide Content : hide the stack content.
General Settings

Switch ID : set the switch ID that links to this content.

Group ID : set the group ID that the switch belongs to.

Content Mode : select the content mode.
Options [ Normal, Lazy Loading ]
Switched OFF

Enable Switched OFF Content : turn on to enable switched OFF content.

Hide in Edit Mode : turn on to hide this content in Edit Mode.

Multi Switch Color Schemes

Show All | Hide All

Edit Mode

Hide Color Palette : turn on to hide the Color Palette.

Disable Dark Mode Colors : turn on to disable Dark Mode Colors.
Color Scheme (Blue, Red, Orange, Yellow, Green, Purple, Grey)

Background : set the background color and Dark Mode background color.

Switch : set the switch color and Dark Mode switch color.

Text : set the text color and Dark Mode text color.

The other colors have the same controls, but with different colors.

Multi Switch Stack

Installation & Updates

Using Multi Switch

Toggles (Switches, Radios, & Icons)

Content

Content Mode

Cookies

Stack Settings

Multi Switch Settings

Toggle Switch Settings

Toggle Radio Settings

Toggle Icon Settings

Multi Switch Content Settings

Multi Switch Color Schemes

More Tutorials

Count Stack

Intro to Firebase

PWA Stack

Multi Switch Stack

Installation & Updates

Using Multi Switch

Toggles (Switches, Radios, & Icons)

Content

Content Mode

Cookies

Stack Settings

Multi Switch Settings

Toggle Switch Settings

Toggle Radio Settings

Toggle Icon Settings

Multi Switch Content Settings

Multi Switch Color Schemes

More Tutorials

Count Stack

Intro to Firebase

PWA Stack

Privacy Center Stack