HELP SHOW MORE / LESS BUTTON Error

Ask the community
,
1


i have try show more/ less in wix preview and it works well, but when i try it in my phone
it didnt works like wix preview,
you can see the screen shot
Top Wix Preview SS

Bot MyPhone SS

here’s my code
button7 code

export function button7_click(event) {
if ($w(“#text39”).text=== shortText) {
$w(“#text39”).text = fullText;
$w(“#button7”).label =“Show Less”;
$w(“#text39”).expand();
} else {$w(“#text39”).text = shortText;
$w(“#button7”).label =“Show More”;
}
}

and here is my on ready code:

import wixWindow from ‘wix-window’;
let fullText;
let shortText;
$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”){
$w(“#button5”).show();
$w(“#button7”).show();
const shortTextLength = 110;
fullText = $w(“#text39”).text;
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#text39”).text = shortText;
}

i wonder how can i fix , please help me

720×1280 43.1 KB

720×1280 112 KB

2

Hey,

We are aware of this issue and it’s currently being investigated.

We will get back to you as soon as we have an update.

Your patience is appreciated.

3

Hello again, @elwin .

I am contacting you regarding the issue you were experiencing with the Show More/Less functionality.

We released a new support article that describes how this functionality can be implemented on your site.

Corvid Tutorial: Expand Text with a Read More Link

Thanks again for your patience and understanding. Let me know if you have any further questions.

4

That is good news as using the multi state box has made it so simple to do now :grinning:

Although regarding the original post the code should have worked on both desktop and mobile device without any issues.

There was an issue with their used code.

import wixWindow from 'wix-window';

let fullText;
let shortText;

$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#button5").show();
$w("#button7").show();
const shortTextLength = 110;
fullText = $w("#text39").text;
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text39").text = shortText;
}

export function button7_click(event) {
if ($w("#text39").text=== shortText) {
$w("#text39").text = fullText;
$w("#button7").label ="Show Less";
$w("#text39").expand();
}else{$w("#text39").text = shortText;
$w("#button7").label ="Show More";
}
}

With the actual code should be.
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) {  //making sure that you have added 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";
}
}

Disregarding the formFactor extra lines here.

if(wixWindow.formFactor === "Mobile"){
$w("#button5").show();
$w("#button7").show();

There is an added expand in the onClick event for the show more/show less toggle.

$w("#text39").expand();

Which isn’t needed for the original tutorial to work.

Plus at the end of the onReady chunk, the end should have been ‘});’ instead of just the one ‘}’.

This should have been okay to use.

let fullText;
let shortText;

$w.onReady(function () {
const shortTextLength = 110;
fullText = $w("#text39").text;
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text39").text = shortText;
});

export function button7_click(event) {
if ($w("#text39").text === shortText) {
$w("#text39").text = fullText;
$w("#button7").label ="Show Less";
} else {
$w("#text39").text = shortText;
$w("#button7").label ="Show More";
}
}