top of page
State Toggle

State Toggle

Use a multi-state box to toggle between different states.

Intermediate.png

Beginner

10K

Published:

February 12, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example we use a multi-state box element to display multiple views. In our case, we have two views, one showing the front and the other showing the back of a mobile phone.

Pressing a button changes the state of the multi-state box which toggles the view.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Page Elements

In our site we added the following page elements:

  • Multi-State Box element: Holds the images and texts for the "front" and "back" states.

  • Image and text elements: The contents of the two states.

  • Four buttons: Two buttons with the ID "Front Face" and two with the ID "Back Face". Each set of two buttons with the same label has a black version and a white version. The buttons with the same labels are layered on top of each other.


Code

The onReady() function adds an event handler to each of the four buttons. There are two possible event handlers defined as the toggleFront() and toggleBack() functions. The toggleFront() function switches from the "front" state to the "back" state and toggleBack() switches the states in the other direction. 

 

On each state change:

  • The show() and hide() functions are used to create a gliding effect on the white buttons, making the buttons look like a toggle switch.

  • The multi-state box changes states, toggling the view that is shown to site visitors. Note that the animations on the elements in the state box are set in the Editor and occur each time the state changes.

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Change Site Content

Change Site Content

Change site content in response to a user interaction.

Intermediate.png

Beginner

Dark Mode

Dark Mode

Display your site in dark mode.

Intermediate.png

Intermediate

Collapse Elements

Collapse Elements

Collapse and expand groups of elements.

Intermediate.png

Beginner

Anchor 2
bottom of page