Multiple expanding/collapsing boxes - Automate?

Ask the community
,
1

I have five boxes that are set to expand and collapse using the script below. While the script provides the correct functionality as it is written, I would like to set the scripting to where any expanded box will collapse when one of the other multi-state box’s button is clicked to expand. My goal is to have one box expanded at a time without the need to collapse a box by button beforehand.
Any suggestion using the current, functioning script? Thank you in advance.

$w.onReady(()=>{
    $w("#readMoreButton").onClick(() => {
        $w("#readMoreStatebox").changeState("expandedState");
    });

    $w("#readLessButton").onClick(() => {
        $w("#readMoreStatebox").changeState("collapsedState");
    });
    $w("#readMoreButton2").onClick(() => {
        $w("#readMoreStatebox2").changeState("expandedState2");
    });

    $w("#readLessButton2").onClick(() => {
        $w("#readMoreStatebox2").changeState("collapsedState2");
    });
    $w("#readMoreButton3").onClick(() => {
        $w("#readMoreStatebox3").changeState("expandedState3");
    });

    $w("#readLessButton3").onClick(() => {
        $w("#readMoreStatebox3").changeState("collapsedState3");
    });
    $w("#readMoreButton4").onClick(() => {
        $w("#readMoreStatebox4").changeState("expandedState4");
    });

    $w("#readLessButton4").onClick(() => {
        $w("#readMoreStatebox4").changeState("collapsedState4");
    }); 
    $w("#readMoreButton5").onClick(() => {
        $w("#readMoreStatebox5").changeState("expandedState5");
    });

    $w("#readLessButton5").onClick(() => {
        $w("#readMoreStatebox5").changeState("collapsedState5");
    });
});
2

Well, first of all try to do it like in this example here…

$w.onReady(()=>{
    $w("Button").onClick((event) => {
        let clickedButton = event.target
        console.log(clickedButton)
    });
});

This will save you a lot of CODE-LINES :wink:

Expand the code…

$w.onReady(()=>{
    $w("Button").onClick((event) => {
        let clickedButton = event.target
        console.log(clickedButton)
        console.log(clickedButton.subString(0,8))
        
        if(clickedButton.subString(0,8)==="readMore") {console.log("More-Button clicked")}
        
        else if(clickedButton.subString(0,8)==="readLess") {console.log("Less-Button clicked")}
                
        else { } 
    });
});

If targeting do not work, then modify this line…

let clickedButton = event.target

to…

let clickedButton = event.target.id
3

Forgive my lack of experience, but I could not get boxes to expand with either of the two pieces of code you provided. Do I rename to match my settings. For example, where you have “Button” to I edit to “readMoreButton” or should your code work verbatim? I’m not sure I understand the first example vs. the second example either. Do I repeat this code five times to replicate the need of each box on my site? Again, please forgive my questioning. I appreciate your assistance and patience.

4

Well first of all, did you look into the CONSOLE?
Or the better question is → do you know what the CONSOLE-function is?

If not…
Open your project in “Preview-Mode” in your Wix-Editor. At the bottom of the screen, you will see the CONSOLE and all its “log-messages”.
The same you will get, when you use for example “google-Chrome” and press F-12 and go to CONSOLE.

In the CONSOLE you will see all the results and steps, which you have integrated into your own CODE. This little message-logs, should be your best friend, when you do some codings.

You ask yourself why? Because, if you use CONSOLE-Logs you will be able to understand your own CODE a way better.

This is also why i implemented some CONSOLE-Logs into your CODE, to show you how your CODE is working, and what your CODE is doing in every single step.

Of course the code is not complete, but i hoped you will recognize the way to continue the coding.

What does the code do right now?

When you click on one of the buttons, what happens?
Is your CODE already able to differ between “readMoreButtons” and "readLessButtons? YES, is already recognize the difference between this two different types of buttons.

But there is a QUESTION! What is in your project a “collapsedState” ???
You surely use a Multi-State-Box. But what is in your project a “collapsed-state” ???

Why you don’t just collapse the whole mulstistate-box, when one of the read-buttons were clicked? Or why you do not use just one COLLAPSED-STATE for all “readLess”-buttons? Do the collapsed-states differs to each other?

As you can see, there are a lot of ways how to design und structure his project.
But i do not have any idea, how is structured your project, so you will have to work on it by yourself, because you know the structure of your own project best.

Another idea would be to use a LOOP. Looping trough all states of your “multi-state-box” to show collapsed states of the MSB.