Hello, I would like to add 6 separate text boxes on one page. I would like to add the “read more” button to all of them so the text expands only if the button is clicked. So far, I have two boxes and I followed the instructions, including adding the code, to get the expandable text boxes.
The first text box works OK, except for the fact that the text has links in it and when the “read more” button is added the links don’t work. But my biggest problem is that when I add the “read more” button to the second text box, both text boxes automatically have the same text, when they are supposed to say different things. Also, the font on the 2nd text box gets really, really big. It’s just completely screwed up, but if I could get these buttons to work then they would be exactly what I need.
Below is my code and a screenshot of what is going wrong.
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 = 40;
// 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;
//TODO: write your page related code here…
});
// collapse the button
export function button1_click(event) {
// display the full text
if ($w(“#text2”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text2”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text2”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}
$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w(“#text3”).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(“#text3”).text = shortText;
//TODO: write your page related code here…
});
// collapse the button
export function button2_click_1(event) {
if ($w(“#text3”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text3”).text = fullText;
$w(“#button2”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text3”).text = shortText;
$w(“#button2”).label = “Show more”;
}
}
