I have problem when I’m creating multiple “Show more” links on one page, as per insturction on: https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link
It works fine when I only create one “Show more button” and text box. However, the problem is that when I create second “Show more button” and text box. Both buttons only display second text box when click.
My example:
The first “show more button” and text box id are #button3 and # text56
The second “show more button” and text box id are #button 2 and #text 38
I want full text of #text3 8 displayed when click #button 2n and full text of #text3 8 displayed when click #button 2 .
However, once I created the below code, by clicking either button2 or button3, only #text 56 displayed under both buttons.
Anyone know how to resolve it?
Code
let fullText = “#text56”; // variable to hold the full text
let shortText = “#text56”; // variable to hold the short version of the text
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 0; // you can change this number
// read the full text and store it in the fullText variable
fullText = $w(“#text56”).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(“#text56”).text = shortText;
});
export function button3_click(event) { if ($w(“#text56”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text56”).text = fullText;
$w(“#button3”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text56”).text = shortText;
$w(“#button3”).label = “Show more”;
}
}
let fullTextOne = “#text38”; // variable to hold the full text
let shortTextOne = “#text38”; // variable to hold the short version of the text
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 19; // you can change this number
// read the full text and store it in the fullText variable
fullTextOne = $w(“#text38”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextOne = fullTextOne.substr(0, shortTextLength);
// set the contents of the text element to be the short text
$w(“#text38”).text = shortTextOne;
});
export function button2_click(event) { if ($w(“#text38”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text38”).text = fullText;
$w(“#button2”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text38”).text = shortText;
$w(“#button2”).label = “Show more”;
}
}