I used the Corvid Tutorial to implement the Show More/Show Less expandable text box on one of my pages. I need several of these types of boxes on a single page, however, and Ihave been unsuccessful editing the code for this. With the following code, the first box works just as it should, but the second shows no shortened text at all and the “Read More” button toggles between Show Less/Show More, but is doesn’t actually get the box to expand. It’s as if there’s no box there at all.
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 = 122;
// read the full text and store it in the fullText variable
fullText = $w(“#membership”).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(“#membership”).text = shortText;
});
export function button1_click(event, $w) {
// check the contents of the text element
if ($w(“#membership”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#membership”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#membership”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}
//This is a repeat of the code until now, with fullText and shortText now called fullText2 and shortText2
let fullText2; // variable to hold the full text
let shortText2; // variable to hold the short version of the text
$w.onReady( function () {
// how many characters to include in the shortened version
const shortText2Length = 100;
// read the full text and store it in the fullText variable
fullText2 = $w(“#schedule”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText2 = fullText2.substr(0, shortText2Length) + “…”;
// set the contents of the text element to be the short text
$w(“#schedule”).text = shortText2;
});
export function button2_click(event, $w) {
// check the contents of the text element
if ($w(“#schedule”).text === shortText2) {
// if currently displaying short text, display the full text
$w(“#schedule”).text = fullText2;
$w(“#button2”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#schedule”).text = shortText2;
$w(“#button2”).label = “Show more”;
}
}