Error when making expandable boxes

Ask the community
,
1

Hello,

Currently trying to include expandable boxes on my site using these instructions: https://support.wix.com/en/article/corvid-tutorial-expand-text-with-a-read-more-link

Even after following the directions I keep getting this error message: Error parsing web-module ‘public/pages/y1ynz.js’: Unexpected token (4:33) while parsing file: public/pages/y1ynz.js

Here is my code and a picture of the error message if anyone can take a look and help me out :slight_smile:

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

$w("#readLessButton1").onClick() => {
    $w("#readMoreStatebox").changeState("collapsedState");
});

});

1592×214 21.5 KB

2

You are missing a ‘(’ on both onClick event handlers

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

$w("#readLessButton1").onClick(() => { //here too
    $w("#readMoreStatebox").changeState("collapsedState");
});
3

Thank you for the help! When I updated the code it gave me this message: TypeError: $w(…).onClick is not a function

4

Take a look here…
https://russian-dima.wixsite.com/wixworld/blank-15

$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");}
5

The code works fine if you follow the tutorial and check your code as Shan has already mentioned and made sure that you added the missing opening parentheses on the onClick event lines.

The code should be as this if going from the tutorial itself.

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

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

The issue you have got with the not a function error is most probably due to the fact that the tutorial uses #readLessButton on the collapse button code.

$w("#readLessButton").onClick(() => {

Whereas you are using #readLessButton1 in your own code, which has the added ‘1’ at the end of it.

$w("#readLessButton1").onClick(() => {

So you would need to double check that buttons id name and make sure that the code and the button id is exactly the same and not different.

If they are different, then that is why you are getting the error as there is no button element on your page with the id name of #readLessButton1.

6

Hello! Thank you for the help :slight_smile: so i changed the button name back to readLessButton but the error in my code seems to be with line 2 and is saying ‘#readmoreButton’ is not a valid selector. I’ve double checked that the button id names exactly match the code so I am still confused as to why it won’t run. Let me know if you have any idea

7

Here is what the code looks like on my page

776×232 27.6 KB

8

Where are you placing the code? Is it in the page code tab or the site code tab?

If it is in the site code tab, then it is probably just an ongoing issue with the site code tab where it shows an error, however if you actually test it on a live site it all works fine.

Here it is all working with buttons on the outside.
https://givemeawhisky.wixsite.com/multistatebox/outside

Along with buttons on the inside.
https://givemeawhisky.wixsite.com/multistatebox/inside

The code on both pages is exactly the same as in the previous reply and has not changed.

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

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

If everything is set up correctly and it still does not want to work for you then simply try changing the buttons onClick function from full code to adding the onClick event through the properties panel and change the function to the new export function line instead.

So basically click on the button for each read more and read less buttons and click on the onClick event in the properties panel for it - if the properties panel is not showing simply right click on the button element and go to view properties.


This will add a new line of export function… at the bottom of your current code, so you simply need to take that top line and replace the existing onClick function line with it.


Do the same for both buttons and you will need move this out of the pages onReady function and to add a closing parentheses and curly bracket after the onReady function, as well as removing the parentheses from after each export function line too.

After that is all sorted your code should look like this and it will work exactly the same as with the previous code example.
https://givemeawhisky.wixsite.com/multistatebox/export

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

export function readMoreButton_click(event) {
	$w("#readMoreStatebox").changeState("expandedState");
}

export function readLessButton_click(event) {
	$w("#readMoreStatebox").changeState("collapsedState");
}
10

Great it seems to be working now! Thanks to everyone for the help

11

Hello,

I have similar problem. When I do preview, my multi state boxes ( expendind read more box ) doesnt work. The code gives an error msg " Property ‘changeState’ does not exist on type ‘State’. “”

12

Same thing for me, it’s not working and I’m following this tutorial word by word. Velo Tutorial: Expand Text with a Read More Link | Help Center | Wix.com