Multi-state Box Code Error

Ask the community
,
1

I am working on a ‘read more’ and ‘read less’ buttons for a multi-state box on my site. Here is the code:
$w.onReady($w( “#readmorebuttondrake” ).onClick(() => {
$w( “#Drakestatebox” ).changeState( “Drakereviewreadmore” );
});
$w( “#button83” ).onClick(() => {
$w( “#Drakestatebox” ).changeState( “Drakereviewcollapsed” );
}):wink: {

});
Here is the error I am receiving:
Error parsing web-module ‘public/pages/c1dmp.js’: Unexpected token (3:2) while parsing file: public/pages/c1dmp.js

Please help!

2

Hey Chelsea :raised_hand_with_fingers_splayed:

You can’t pass functions directly to the page’s onReady() function, you need to pass it an anonymous function that contains all the functions you want to run when the page is ready.

$w.onReady(() => {

    $w("#readmorebuttondrake").onClick(() => {    $w("#Drakestatebox").changeState("Drakereviewreadmore");
    });
    
    $w("#button83").onClick(() => {    $w("#Drakestatebox").changeState("Drakereviewcollapsed");
    });
})

Ahmad

3

That worked! Thank you!!
I got the code format from here: https://support.wix.com/en/article/corvid-tutorial-expand-text-with-a-read-more-link Wonder if the error lives there or if I just interpreted it incorrectly. Either way, you’re the best!

4

You’re welcome Chelsea :wink:

5

Ok Ahmad was a little bit faster
but anyway, if you have the next time an issue with multistate-boxes, just take a look here to this little example…

https://russian-dima.wixsite.com/meinewebsite/multistate-boxes

$w.onReady(function () {   });

export function button1_mouseIn(event) {$w("#BannerStateBox").changeState("BestSeller");}
export function button2_mouseIn(event) {$w("#BannerStateBox").changeState("OutOfStock");}
export function button3_mouseIn(event) {$w("#BannerStateBox").changeState("New");}

or this alternative, similar to your code…

$w.onReady(function () {   
    $w('#button1').onClick(() => {$w("#BannerStateBox").changeState("BestSeller");})
    $w('#button2').onClick(() => {$w("#BannerStateBox").changeState("OutOfStock");})
    $w('#button3').onClick(() => {$w("#BannerStateBox").changeState("New");})           
});
6

I have a follow up question. There is ‘dead’ space beneath the multi-state box in the collapsed state because of how much additional text needs to be shown in the expanded state. Is there a way for that space not be there until needed for the expanded state? Does that make sense??

354×838 41.9 KB

7

It’s a bug in the multi-state box, I did already report it.

As a way around it, create another state, and set it’s height to 5px, this will force the box to extend its height to match the content of the current state.

But you’ll notice that elements will stick to the bottom of the box, so create a regular transparent box and put one in the bottom of each state, it’ll act as a margin.