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 #button2 and #text38
I want full text of #text38 displayed when click #button2n and full text of #text38 displayed when click #button2 .
However, once I created the below code, by clicking either button2 or button3, only #text56 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";
}
}
If you search the forum this has been asked many times before like here.
https://www.wix.com/corvid/forum/community-discussion/adding-several-expandable-text-boxes-with-read-more-links
https://www.wix.com/corvid/forum/community-discussion/creating-multiple-show-more-show-less-links
https://www.wix.com/corvid/forum/community-discussion/large-annoying-space-after-using-show-more-show-less-w-wix-code
https://www.wix.com/corvid/forum/community-discussion/multiple-expandable-text-boxes-error