"Show more" link for big text dont work

Discussion Ask a question
,
1

Hi, how are you?

I’m try to follow this tutorial:
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

to create a show more link to static text in text box and when i test this in preview mode works perfectly but when i publish the site, dont work!

Here is preview mode (mobile):

And here is published site (mobile):

1080×868 28.6 KB

Here is my site code:

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
const shortTextLength = 100;
fullText = $w(“#text18”).text;
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#text18”).text = shortText;
$w(“#button7”).show();
} else {
$w(“#button7”).hide();
}
});

export function button7_click(event) {
// display the full text
$w(“#text18”).text = fullText;
// collapse the button
$w(“#button7”).collapse();
}

Thanks for help!!!

2

Firstly, is this on just your mobile site or is it on both your mobile and your desktop site?

If it is on both then you don’t need to have the Form Factor for the mobile view only, however if it is just on the mobile version of your site, then please make sure that you have hidden on load all the mobile only elements that are on the desktop editor.
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

Please note also, that you can’t use the preview to check if this works, you will need to view your live and published site on a mobile device to test this.

Finally, please make sure that you are using the correct code for your chosen option as shown below.

3

The “Show More” button disappears once the full text is displayed with this option.

Code for the “Show More” Button

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text 

$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) { //make sure that you add the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
4

The button toggles between “Show more” and “Show less” with this option.

Code for the “Show More/Show Less” Toggle Button

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text 

$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) { //make sure that you add the onClick event in properties
// check the contents of the text element 
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less"; 
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}