Multi-state box based on switch

Ask the community
,
1

Hi all,

I’ve been searching for ways to use a “switch” in order to toggle between 2 versions of my website.
The switch would be used to change simultaneously background images, text and graphics.

Ideally, doing so wouldn’t bring the scroll back to the top so it seemed the best choice would be to link a bunch of Multi-State boxes to the same switch but I’m having trouble with the code…

I would need any help with the appropriate code to execute this or any other approach to reach the result I’m after (if multi-state + switch isn’t the right way to go)

Any help will be much appreciated!!

Thanks in advance

2

Don’t see any code of you ?
Where is your code?
Do you have already some code, or do you expect a Ready2Go-Solution?

Take a look here, and learn how to use code working with Multi-State-Boxes…
https://russian-dima.wixsite.com/meinewebsite

Take also a look onto all the other useful little examples, which may help you understanding the CODING better.

3

Hi,

thanks for the reply. Sorry I forgot to attach my code.

So far this is what i have :

$w.onReady( function () {
$w( “#Switch” ).onClick(() => {
$w( ‘#statebox1’ ).changeState( “state12” );
$w( ‘#statebox2’ ).changeState( “state22” );
} );
$w( “#Switch” ).onClick(() => {
$w( ‘#statebox1’ ).changeState( “state11” );
$w( ‘#statebox2’ ).changeState( “state21” );
} );
});

Where the switch is #Switch
with 2 multi-state boxes (#statebox1 and #statebox2)

It seems to work. There are several things that are limited if I want to use dynamic backgrounds or other stuff. But I can arrange the design around this.

So I guess my questions would be :

  • Does this seem like a proper code?
  • Does this seem like the best approach to do what I want to do?

Thanks a lot for answering and sorry for forgetting to attach the code!

4

@creativelabdig
Yes, this code looks very good. You can work with it, if you can :grin:

5

@russian-dima
Thank you for your feedback, much appreciated!

6

@creativelabdig
Now you have updated your code!
There was no shown code before :wink: