I want to add ax expandable text box with a show more link in a repeater.
I cannot get this example to work in a repeater. I keep on getting an error message that “length” is an undefined property.
Help please.
https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code
Helllo
here’s the steps of doing it:
- add a repeater
- in the repeater item add the text box and the button
-define the values on ready - add on button click event
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
const shortTextLength = 40;
fullText = $w("#text3").text //or whaterver text you want
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text3").text = shortText;
});
export function button1_click(event, $w) {
if ($w("#text3").text === shortText) {
$w("#text3").text = fullText;
$w("#button1").label = "Show Less";
} else {
$w("#text3").text = shortText;
$w("#button1").label = "Show More";
}
}
Good Luck
Massa
This is not working for me.
This looks like nothing is calling the repeater. Does something like below need to be there?
$w(“#repeater1”).onItemReady( ($w, itemData, index) => {
}
If I put the code you provided in this, it says export has to be in high level.
Also I’m working with a dynamic dataset. I should have mentioned that. 
Thank you!
I have same issue. Does you get answer from some one? let me know. I am still keep looking for answer
Hi, Can you please share your code and a link to your site?
Roi.
@dainis-locans would you please post your question in a new thread.
Best
Massa
Please anybody for assistance to fix this code. I cant find solution to expand and shortening dynamic texts in repeater.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady( function () {
const shortTextLength = 150;
fullText = $w(“#text263”).text //or whaterver text you want
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#text263”).text = shortText;
});
export function button45_click(event, $w){
$w(“#repeater1”).forEachItem( ($w, itemData, index) => {
if ($w(“#text263”).text === shortText) {
$w(“#text263”).text = fullText;
$w(“#button45”).label = “Show less”;
} else {
$w(“#text263”).text = shortText;
$w(“#button45”).label = “Show more”;
}
}
}
Hello Dainis
Here’s a code example to show more/less of a repeater text element:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
const shortTextLength = 40;
fullText = $w("#text1").text
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text1").text = shortText;
});
export function button1_click(event, $w) {
if ($w("#text1").text === shortText) {
// fullText = fullText.replace(' ', ' ');
$w("#text1").text = fullText;
$w("#button1").label = "Show Less";
} else {
$w("#text1").text = shortText;
$w("#button1").label = "Show More";
}
}
Good Luck!
Massa
@massasalah18 , thank you, but this code doesn’t work for my repeater wit dynamic text boxes
I saw this element in some codes, but how and where to correctly integrate in your code you sent me?
$w(" #repeater1 ").forEachItem( ($w, itemData, index) => {
@dainis-locans That would be a different implementation but same idea, here how it would look like:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
const shortTextLength = 40;
fullText = $w("#text1").text
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text1").text = shortText;
$w('#repeater1').forEachItem(($w, itemData, index) => {
$w('#button1').onClick((event, $w) => {
if ($w("#text1").text === shortText) {
$w("#text1").text = fullText;
$w("#button1").label = "Show Less";
} else {
$w("#text1").text = shortText;
$w("#button1").label = "Show More";
}
})
})
});
Best
Massa
@massasalah18 , than you!
I pasted your code, but in this line $w(‘#button1’).onClick((event, $w ) => {
appears note: “$w is already declared in the upper scope”
What is wrong there?
You probably have in your code an on click button function: export function button1_click(event, $w). So what the note is about is that you are having two event handling functions for the same event (on click).
Best
Massa
@massasalah18 I really try to understand where is fault, because I place only your code, just changed the ID names and nothing more. Look at this please:
@dainis-locans Oh I see the problem now, in line 10 you have $w defined to get the button element so in line 11 no need for the $w you can write it this way $w(‘#button1’).onClick((event) .
Best
Massa
@massasalah18 This looks for me as neverending story in my coding world.
I can’t get this code work properly - text boxes in repeater on page opening are still expanded.
Look at this site please https://www.biznesam.lv/handbooks
Hello Dainis,
You were adding a on click event on the button and not using it, also the place of $w in your code is better to be used with on click and not whit the repeater. I have checked your website and fixed it, take a look at it and let me know!
Best!
Massa
There are not any changes in functionality 
May I ask you to check it please?
Just got this working on my site, it works if the #text39 is not connected to the repeater in the template and #button1 starts with the label “Show More” also you need to add your own database field instead of mine (description) at itemData.description & clickedItemData.description :
let fullText;
let shortText;
let shortTextLength = 300
$w.onReady( function () {
$w("#repeater1").onItemReady( ($item, itemData, index) => {
fullText = itemData.description
shortText = fullText.substr(0, shortTextLength) + "...";
$item("#text39").text = shortText
});
$w("#button1").onClick( (event) => {
let $item = $w.at(event.context);
let clickedItemData = $item(“#dataset1”).getCurrentItem()
if ($item(“#button1”).label === “Show More”){
$item("#text39").text = clickedItemData.description
$item("#button1").label = "Show Less"
} **else** {
fullText = clickedItemData.description
shortText = fullText.substr(0, shortTextLength) + "...";
$item("#text39").text = shortText
$item("#button1").label = "Show More"
}
});
})
Thank you very much for your code, it works very well. Question, if we would like to add a check whether the text length is shorter than the fullText or the text field is empty, where do you place them?
In this example, it does the check but I don’t know how to include them in your code.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
if (!fullText) { $w(‘#myTextElement’).collapse(); $w(‘#myButton’).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(‘#myTextElement’).text = fullText; $w(‘#myButton’).collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + “…”; $w(‘#myTextElement’).text = shortText; } }
@harakiko Please format your code as per Guide Lines. It makes it a lot easier to read and you will get more answers.