Expandable text box on Mobile

Ask the community
,
1

I’m trying to use the new feature of having expandable text box and I’ve modified the code so that the full text (without read more button) appears on the website but short-text (with read more button) appears on the mobile site.

But the read more button isn’t triggering the text box to expand. Any idea why?
I’ve tried it for the paragraph under ‘Personal Statement’ on the page below.

https://kshaktee.wixsite.com/website-5/why-bespoke

Thank you!
Shakti

2

Hey,
It seems that your buttons aren’t hooked properly to the click event.
Make sure you add it using the properties panel or by adding an onClick event handler for each button.

Side note - this is a very cool implementation. Where did you get the idea from? Please consider sharing it in the Show Off forum.

3

Yes, thank you it worked! Although I am now facing another trouble - button position does not change when it toggles between longText and shortText and hence blank space appears on my mobile device whenever shortText is displayed. Also, I can see some garbage string in short text…

Following is the screenshot and the code…

750×1334 105 KB

var fullText=;
var shortText=;
import wixWindow from ‘wix-window’;

$w.onReady(function ()
{
if (wixWindow.formFactor === “Mobile”)
{
const shortTextLength = 400;
for (let i = 1; i < 6; i++)
{
$w(#button${i}).expand();
$w(#button${i}).show();
fullText[i] = $w(#para${i}).html;
shortText[i] = fullText[i].substr(0, shortTextLength) + “…”;
$w(#para${i}).html = shortText[i];
}

}

});

export function button1_click() {
if ($w(“#para1”).html.length < fullText[1].length)
{
$w(“#para1”).html = fullText[1];
$w(“#button1”).label = “Show Less”;
}
else {
$w(“#para1”).html = shortText[1];
$w(“#button1”).label = “Read more”;
}
}

4

I have the same problem (button position not changing on mobile) , did you manage to fix this by any chance?

5

Hi Guys!

You might want to consider to place your text elements inside some sort of a container, that way when it is collapsed it is still the size of the container (and when it is expand the container expands with it).
I suggest you read this article regarding page layouts & size changing elements.

Doron.

6

Thank you, Doron, is there an article you can direct us to on how to make the container collapse with the text? I was using this article to create the expandable text box.

7

Hi All,
I found a useful example on how to create expanding and collapsing text boxes .
Cheers, Ben

8

Why is collapsible text box not working on mobile site? has anyone faced this issue?