I have followed the wix code forum guide to employ “expandable text” boxes on my site. Although the code works perfectly with one expandable text box - it seems to fail when another is added to the page.
I’ve added the code below. Basically, box #1 has the correct short-text (first 30 characters pulled from it’s corresponding largetext box). However, when I click the “show more” button, it then populates it with the short text from button 2, and then the long/full text from button 2.
If I was to add a third button, this would happen with both the first and second button… (they would look correct upon the page loading, but once the button is clicked - would populate from the third text box).
Any ideas on how this can be resolved? Much appreciated!
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 = 30;
// read the full text and store it in the fullText variable
fullText = $w(“#text17”).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(“#text17”).text = shortText;
});
export function button6_click(event, $w) {
// check the contents of the text element
if ($w(“#text17”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text17”).text = fullText;
$w(“#button6”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text17”).text = shortText;
$w(“#button6”).label = “Show More”;
}
}
$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(“#text22”).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(“#text22”).text = shortText;
});
export function button7_click(event, $w) {
if ($w(“#text22”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text22”).text = fullText;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text22”).text = shortText;
$w(“#button7”).label = “Show more”;
}
}
export function button8_click(event, $w) {
if ($w(“#text24”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text24”).text = fullText;
$w(“#button8”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text24”).text = shortText;
$w(“#button8”).label = “Show more”;
}
}
