Longer/Shorter text displayed in repeater

Ask the community
,
1

Hey,
I’ve been trying to solve this but there just seems to be an issue in getting the information of the dataset to display the right information… Ideally, the textbox would display the first 40 characters of the text and if we press on the button it would display all the text .

The following codes works in alternating between full-text/short-text commands but only displays the default value of the textbox (i.e. doesn’t display the real text from the dataset anymore)

–
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(“#text46”).text
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#text46”).text = shortText;

$w('#button13').onClick((event, $w) => {

let $item = $w.at(event.context)
$item(“#repeater3”).text = “Selected”;
if ($item(“#text46”).text === shortText) {
$item(“#text46”).text = fullText;
$item(“#button13”).label = “Show Less”;
} else {
$item(“#text46”).text = shortText;
$item(“#button13”).label = “Show More”;
}
})
})

Can anybody help me solve this?

2

You can’t use a repeater, you have to use a text box as in the tutorial.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

Check your code as it should be like this in the tutorial.

//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) {
// 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";
}
}
3

Hmm, alright…
The issue is I depend on the repeater since it’s providing “newsy” information. Is there another way to shorten the text in a dataset-driven repeater text-box/button/etc. and make it longer upon a user-action (onclick, etc.)?

If not, would having 2 text-boxes inside a repeater work (i.e. short-version of text displayed and onclick hide short-version - display long-version)?