Problem with View more/View less Content in a Repeater (Expandable Text Box)

Ask the community
, ,
1

I’m prefacing this post with the fact that I am NOT a coder or developer, but simply followed instructions from Wix as best I could—so please bear with my ignorance.

I’ve added a view more/view less toggle button with static text (not dynamic text) to create an expandable text box in a repeated element, by copying and pasting the code to create an expandable text box per the Wix instructions on this page:
https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code

The view less/view more button and truncation of the text is working fine, but I’m having a major issue with the content (first bulleted item, below), and I also have some other questions:
• When I check the functionality of the button in preview mode, the content-specific text changes within each element to the same text that’s in the first element (so each element contains the same text when truncated). I’m sure the problem is with the code, but don’t know how to fix it. The code is below, between the horizontal lines. I’ve also attached a screen shot of the code, as well as screen shots of the page in the editor view, with the full, expanded text, and the preview, with the truncated text.

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

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
1
2
3
4
5
6
7
8
// how many characters to include in the shortened version
const shortTextLength = 236;
// read the full text and store it in the fullText variable
fullText = $w(“#text4”).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(“#text4”).text = shortText;
//TODO: write your page related code here…

});

export function button1_click(event, $w) {
// check the contents of the text element
if ($w(“#text4”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text4”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text4”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}

1914×1336 308 KB

1306×1884 443 KB

1306×2200 231 KB

The other questions I have are these:

• I was hoping that when the text is collapsed (by default) that the box would collapse with it; I don’t want a long box with lots of empty space, which you see in the last screen shot. Is this possible?
• Is it possible to change the way the “View less” button looks so it matches the “View more” button?

Thank you in advance for your help.

2

Hello

here your working with a repeater so you cant set the $w(" #text4 “).text like that as all the items of the repeater have the same text box with the same id. Try using $w(”#myRepeater").forEachItem to set each items’ text to it’s right value inside the button click event.
check repeaters here: https://www.wix.com/code/reference/$w.Repeater.html#forEachItem

Best
Massa

3

Thank you, Massa. I will look into this in a few days and let you know how it goes!

4

Hi Massa, I’m having a similar issue. Hoping you can help. Code below:

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

$w(“#dynamicDataset”).onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// set the fullText variable to be the text from the collection
fullText = $w(‘#dynamicDataset’).getCurrentItem().textField;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(“#repeater1”).forEachItem( (‘#text349’)) .collapse();
$w(‘#button69’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(“#repeater1”).forEachItem( (‘#text349’)).text = fullText;
$w(‘#button69’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#repeater1”).forEachItem( (‘#text349’)).text = shortText;
}
}
});

5

@drewfabrikant would you please post your issue on a new thread :slight_smile: