Hi
I'm relatively new to this all so please excuse the basic question!
- I have some text that I'd like to display 100 words of and then #showmore using a show more and a #showless button.
- It seems that the default display (short text) removes the first 100 characters, rather than displaying them! Any assistance would be great, thanks very much!
Here is my code:
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 = 100; // read the full text and store it in the fullText variable fullText = $w("#text15").text; // grab the number of characters defined in shortTextLength and store them in the shortText variable shortText = fullText.substr(100) + "..."; // set the contents of the text element to be the short text $w("#text15").text = shortText; }); export function button2_click(event) { // check the contents of the text element if ($w("#text15").text === shortText) { // if currently displaying short text, display the full text $w("#text15").text = fullText; $w("#button2").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text15").text = shortText; $w("#button2").label = "Show more"; }}
Make sure that your code is complete and not missing anything as this line is wrong in your code:
shortText = fullText.substr(100) + "...";
Code for the "Show More" Button:
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; // you can change this number // read the full text and store it in the fullText variable fullText = $w("#myTextElement").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("#myTextElement").text = shortText; }); export function mybutton_click(event, $w) { //make sure you have added the onClick event in properties // display the full text $w("#myTextElement").text = fullText; // collapse the button $w("#myButton").collapse(); }
Code for the "Show More/Show Less" Toggle Button:
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; // you can change this number // read the full text and store it in the fullText variable fullText = $w("#myTextElement").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("#myTextElement").text = shortText; }); export function mybutton_click(event, $w) { //make sure you have added the onClick event in properties // check the contents of the text element if ($w("#myTextElement").text === shortText) { // if currently displaying short text, display the full text $w("#myTextElement").text = fullText; $w("#myButton").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#myTextElement").text = shortText; $w("#myButton").label = "Show more"; } }