Does anyone have the full code for an expandable text box? I can it get it to work for me 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 = 40; // read the full text and store it in the fullText variable fullText = $w("text11").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("text11").text = shortText; //TODO: write your page related code here... // 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("text11").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("text11").text = shortText; }); export function button3_click(event, $w) { // check the contents of the text element if ($w("text11").text === shortText) { // if currently displaying short text, display the full text $w("text11").text = fullText; $w("button3").label = "Show less"; } else { // if currently displaying full text, display the short text $w("text11").text = shortText; $w("button3").label = "Show more"; } }
Hello, Stephen,
I checked your code and saw a few errors:
1. There was a repeating code which was not needed and raised an error (7th to 14th line of your code)
2. Your selectors were not correct for the elements. You should add # next to element id to select it (e.g #text11 is correct and text11 is not)
Please try the code below. It should work fine if you have text11 and button3 elements in your page.
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("#text11").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("#text11").text = shortText; //TODO: write your page related code here... }); export function button3_click(event, $w) { // check the contents of the text element if ($w("#text11").text === shortText) { // if currently displaying short text, display the full text $w("#text11").text = fullText; $w("#button3").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text11").text = shortText; $w("#button3").label = "Show more"; } }
Hope this helps
Juste
Juste, thank you so much it worked. Have a great day.