Issue With Button mapping Multi State Boxes

Ask the community
, ,
1

Hello all, currently, I’m building the account section for members on my site. I have a list of buttons, that onclick change the multi state box visible to the corresponding state.

Button 1 - State 1

On each state, I created an edit button that corresponds with the State reflecting the info that can be edited, that is then shown on the initial state box.

Button 1 - > State 1 - > Edit State 1 button - > state1Edit

coding it out at first, everything worked. 1 State in the multistate box however has a multi state box in it with various tabs. When I coded this section, everything went wrong.

1st problem. if I click on Button 2 to take me to State 2, It will take me to State 2. If i click that same button again, it goes back to State 1.

2nd problem. When I click on the buttons in Multi State Box 2 that is within the second State of the main Multi State Box, Instead of navigating to the corresponding State when button is clicked, it takes you back to State1 of the main State box.

Button 2 → State 2 → Button 1 of Multi State Box 2 - > State 1 of Multi State Box 1.

$w.onReady(function () {
    
    //ACCOUNT SIDE NAV BUTTONS
    $w("#persInfButton").onClick(function () {
        $w("#accountBox").changeState("personalInfoState");
        $w("#anchor1").scrollTo();
    });

    $w("#contInfButton").onClick(function () {
        $w("#accountBox").changeState("contactInfoState");
        $w("#anchor1").scrollTo();
    });

    $w("#aboutButton").onClick(function () {
        $w("#accountBox").changeState("aboutState");
        $w("#anchor1").scrollTo();
    });

    $w("#socialButton").onClick(function () {
        $w("#accountBox").changeState("socialState");
        $w("#anchor1").scrollTo();
    });

^^^ Above these buttons all work fine but when clicked twice go back to the first state of (“personalInfoState”)

// ABOUT NAV BUTTONs

    $w("#bioNavButton").onClick(function () {
        $w("#bioStateBox").changeState("Bio");
        $w("#anchor1").scrollTo();
    });

     $w("#musicNavButton").onClick(function () {
        $w("#bioStateBox").changeState("Music");
        $w("#anchor1").scrollTo();
    });

     $w("#moviesNavButton").onClick(function () {
        $w("#bioStateBox").changeState("Movies");
        $w("#anchor1").scrollTo();
    });

     $w("#podcastsNavButton").onClick(function () {
        $w("#bioStateBox").changeState("Podcasts");
        $w("#anchor1").scrollTo();
    });

1872×1064 301 KB

This is what it looks like.
The Secondary MultiState Box is transparent inside the black container box on the right.

I dunno if it’s an editor issue, I haven’t checked the site live yet. When in preview, when you click the buttons you see it wants to make the change, but right as it’s about to, it defaults to the first state of the main multi state box.

i Apologize if i made it confusing to understand, just a bit frustrated as I thought everything was being coded properly just to have it all go to crap really fast.

Any hints as to what I’m doing wrong?

2

It’s hard to understand from your description what the problem is.
If you provide a link to the live page with steps to reproduce, maybe it’ll be easier.