Hi all,
I’ve successfully followed the Wix template for a show more/show less collapsible text button with up to two text object and button pairs. However, when I add a third text object and button pair, it’s showing the condensed version, but it doesn’t expand when the button is clicked. Any ideas on why this isn’t working? It’s probably something really basic; I’ve no idea what I’m doing.
Thanks!
let fullText_ingrid; // variable to hold the full text
let shortText_ingrid; // variable to hold the short version of the text// For full API documentation, including code examples, visit Velo API Reference - Wix.com
// how many characters to include in the shortened version
let fullText_trent; // variable to hold the full text
let shortText_trent; // variable to hold the short version of the text// For full API documentation, including code examples, visit Velo API Reference - Wix.com
// how many characters to include in the shortened version
let fullText_alisa; // variable to hold the full text
let shortText_alisa; // variable to hold the short version of the text// For full API documentation, including code examples, visit Velo API Reference - Wix.com
// how many characters to include in the shortened version
$w.onReady( function () {
const shortTextLength_ingrid = 300;
// read the full text and store it in the fullText variable
fullText_ingrid = $w(“#text10”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText_ingrid = fullText_ingrid.substr(0, shortTextLength_ingrid) + “…”;
// set the contents of the text element to be the short text
$w(“#text10”).text = shortText_ingrid; //TODO: write your page related code here…
const shortTextLength_trent = 300;
// read the full text and store it in the fullText variable
fullText_trent = $w(“#text38”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText_trent = fullText_trent.substr(0, shortTextLength_trent) + “…”;
// set the contents of the text element to be the short text
$w(“#text38”).text = shortText_trent; //TODO: write your page related code here…
const shortTextLength_alisa = 300;
// read the full text and store it in the fullText variable
fullText_alisa = $w(“#text40”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText_alisa = fullText_alisa.substr(0, shortTextLength_alisa) + “…”;
// set the contents of the text element to be the short text
$w(“#text40”).text = shortText_alisa; //TODO: write your page related code here…
});
export function button1_click(event) {
// check the contents of the text element
if ($w(“#text10”).text === shortText_ingrid) {
// if currently displaying short text, display the full text
$w(“#text10”).text = fullText_ingrid;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text10”).text = shortText_ingrid;
$w(“#button1”).label = “Show more”;
}
//Add your code for this event here:
}
export function button2_click(event) {
// check the contents of the text element
if ($w(“#text38”).text === shortText_trent) {
// if currently displaying short text, display the full text
$w(“#text38”).text = fullText_trent;
$w(“#button2”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text38”).text = shortText_trent;
$w(“#button2”).label = “Show more”;
}
}
export function button3_click(event) {
// check the contents of the text element
if ($w(“#text40”).text === shortText_alisa) {
// if currently displaying short text, display the full text
$w(“#text40”).text = fullText_alisa;
$w(“#button3”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text40”).text = shortText_alisa;
$w(“#button3”).label = “Show more”;
}
}