Hello,
I am willing to create a page with several expandable text boxes with read more buttons. The texts are static. So far, I managed to create one with the Corvid tutorial, but I don't know where I should add the code for the other text boxes and buttons without disturbing the first one. I created the second text (text55), the second button (button2) and added the code to control it, but I am not sure of where to put the code controlling the second text.
I am very new at this, so thank you for your help!
For now, the code for the page is:
$w.onReady(function () {
//TODO: write your page related code here...
// how many characters to include in the shortened version
const shortTextLength = 900;
// read the full text and store it in the fullText variable
fullText = $w("#text53").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("#text53").text = shortText;
// how many characters to include in the shortened version
// read the full text and store it in the fullText variable
});
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
export function button1_click(event) {
// check the contents of the text element
if ($w("#text53").text === shortText) {
// if currently displaying short text, display the full text
$w("#text53").text = fullText;
$w("#button1").label = "Réduire";
} else {
// if currently displaying full text, display the short text
$w("#text53").text = shortText;
$w("#button1").label = "Lire la suite";
}
}
export function button2_click(event) { //Add your code for this event here: // check the contents of the text element if ($w("#text55").text === shortText) { // if currently displaying short text, display the full text $w("#text55").text = fullText; $w("#button2").label = "Réduire"; } else { // if currently displaying full text, display the short text $w("#text55").text = shortText; $w("#button2").label = "Lire la suite"; } }
@cmcd ,
You can try this one:
//Set texts const texts = [ { //first text details: "text": "some long text some long text", //put your full text here "shortTextLength": 15, //number of characters "buttonId": "button1", // use the propertyId of the expanding button "textboxId": "text1", // use the propertyId of the textbox "defaultText": "fullText" //do you want it to start from full text? }, { //second text details: "text": "other long text other long text other long text", "shortTextLength": 10, "buttonId": "button2", "textboxId": "text2", "defaultText": "shortText" } ]; const shortTxtLabel = "View more"; //the text displayed on the button const fullTxtLabel = "View less"; //<<<<<No need to update anything in the following code >>>>> const numberOfTexts = texts.length; $w.onReady(function () { let buttonSelector = ""; for (let i = 0; i < numberOfTexts; i++) { buttonSelector += `#${texts[i].buttonId},`; if (texts[i].defaultText === "fullText") { $w(`#${texts[i].textboxId}`).text = texts[i].text; $w(`#${texts[i].buttonId}`).label = fullTxtLabel; } else { $w(`#${texts[i].textboxId}`).text = texts[i].text.substring(0, texts[i].shortTextLength); $w(`#${texts[i].buttonId}`).label = shortTxtLabel; } } $w(buttonSelector).onClick((event) => { let relevantText = texts.find(e => e.buttonId === event.target.id); let relevantButton = $w("#" + event.target.id); let relevantTextbox = $w("#" + relevantText.textboxId); if (relevantButton.label === fullTxtLabel) { relevantButton.label = shortTxtLabel; relevantTextbox.text = relevantText.text.substring(0, relevantText.shortTextLength); } else { relevantButton.label = fullTxtLabel; relevantTextbox.text = relevantText.text; } }) })