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.
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.
Related Examples
Did this help?
|
Thanks for your feedback!
Change Site Content
Change site content in response to a user interaction.
Beginner
Dark Mode
Display your site in dark mode.
Intermediate
Collapse Elements
Collapse and expand groups of elements.
Beginner