Hi guys. I am trying to place multi-text blocks on a page and attach the “Show more / Show less” button to them. And I did it!
But the following problem arose: when trying to expand the first text block (We are NADCA certified …), it IS REPLACED by the text from the SECOND text block (see pic), and only then it is expanded.
I used this tutorial https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link and it worked well for one text block
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here...
});
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
//1 FAQ//
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 100;
// read the full text and store it in the fullText variable
fullText = $w("#text1").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("#text1").text = shortText;
});
export function button1_click(event, $w) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#text1").text === shortText) {
// if currently displaying short text, display the full text
$w("#text1").text = fullText;
$w("#button1").label = "Less";
} else {
// if currently displaying full text, display the short text
$w("#text1").text = shortText;
$w("#button1").label = "More";
}
}
//2 FAQ//
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 100;
// read the full text and store it in the fullText variable
fullText = $w("#text2").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("#text2").text = shortText;
});
export function button2_click(event) {
// check the contents of the text element
if ($w("#text2").text === shortText) {
// if currently displaying short text, display the full text
$w("#text2").text = fullText;
$w("#button2").label = "Less";
} else {
// if currently displaying full text, display the short text
$w("#text2").text = shortText;
$w("#button2").label = "More";
}
}
Perhaps some more variables or dividers are required. I’m a beginner, please treat with understanding 