Actions

Toggle Buttons Developer Notes

Information

A Toggle Button is used to affect the contextual state of the screen. It allows the user to navigate between different content within the same screen.

There are a total of 3 different themes. These include:

  • Bar - Default
  • Floating
  • Floating Line

The examples below that display the states are mainly for content authors to visualize and understand. Each toggle structure between the themes are the same with the only difference being the Theme IDs that are set upon the __mst_toggle elements.

Hoverstate on desktop and downstate on tablet/mobile, for the different options on the “toggle” is indicated by the text changing colour.

Toggle Button - Bar (2 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_2_tabs').__mstToggle_2_tabs();

Toggle Button - Bar (3 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_3_tabs').__mstToggle_3_tabs();

Toggle Button - Bar (4 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_4_tabs').__mstToggle_4_tabs();

Toggle Button - Floating (2 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_floating_A_3_tabs').__mstToggle_floating_A_3_tabs();

Toggle Button - Floating (3 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_floating_A_3_tabs').__mstToggle_floating_A_3_tabs();

Toggle Button - Floating (4 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_floating_A_4_tabs').__mstToggle_floating_A_4_tabs();

Toggle Button - Floating Line (2 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_floating_B_2_tabs').__mstToggle_floating_B_2_tabs();

Toggle Button - Floating Line (3 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_floating_B_3_tabs').__mstToggle_floating_B_3_tabs();

Toggle Button - Floating Line (4 Tabs)

Visual Example

Code Usage

HTML
Javascript Initialization
										$('#__mst_toggle_floating_B_4_tabs').__mstToggle_floating_B_4_tabs();