Expandable Text Boxes

Discussion Ask a question
,
1

Hi!

I am trying to put an expandable text box on my page. I am following the instructions and adding the code as the tutorial says. When I get to the step of adding the short text variable, it says to preview the page to see the short text appear with an ellipsis, but that never happens. It says there is an error in code, but I am taking the code as it appears in the tutorial and changing the #MyTextbox to the appropriate text box number.

Has anyone else had troubles with this? How did you fix it?

Thank you!

2

Are you following this tutorial here: Wix Code Tutorial: Creating a Show-More Link

With this part of the instructions:
Preview your page now to see how only the first 40 characters of your text appear, with an ellipsis at the end. Don’t try clicking the button, because you haven’t written its code yet.

If you have copied the code exactly as it is and worked down through adding your code to the page as stated, then it should look like this so far:

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("#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;
});

Also, check you have changed both text elements within the bracket properly from #myTextElement to whatever your text element id is, e.g. #text1 - making sure that you keep the speech marks too, so that it should be inside the brackets like this (“#text1”) and not (#text1).

Then it should show on your preview as it states, showing just the first 40 characters of your text with an ellipsis at the end, basically the rest of the text truncated or clipped with the show more button underneath it.

If it doesn’t then you have done something wrong with your code somewhere.

2 Likes
3

Thank you! That helped a lot. I was able to figure out the preview option. I need help with the toggle button now.

I was able code for the show more button to display the full text, but the code for the toggle between show more/show less isn’t working.

Is this something you would also be able to help with?

4

You can only have one of them written into your code, either the ‘show more’ button or the ‘show more/show less’ toggle button.

You can’t put both into the same code, so choose which one you want to use on your page and run with that one only.

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";
}
}
1 Like