Coding issue with Expandable Text Box Tutorial

Hi everyone, I tried to make an expandable text box with a ‘read more’ button today on a website I’m building and the coding didn’t quite work out. As I’m a bit of a newb with all this I contacted customer support and I was directed to this forum for your savant advice as what I’m trying to do has specific coding requirements! See below my original email with screenshots attached… hope it all makes sense!


Dear customer service,

I am attempting to build three expandable text boxes with a show more link using wix code on my portfolio website, on the Videos page.

I have been using your tutorial https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code#part-1-setting-up-the-text-element-and-the-button

When I got up to the section ‘‘Working with Static Text’’ point 3 instructed me to preview the website to see the shortened text before moving on to making the button active. It is supposed to look like the description below from point 3:
“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.”

However this does not happen. Instead I see the full text box with the Show More button below it. There are also a few coding error alerts that have come up which I have no idea how to fix.

Please see attached the view of the page in preview, as well as the Java Code I have put in so far as well as the error messages when I preview.

The error in the coding panel for line 2 says the ‘‘short text is unread’’. I am unsure how to correct this as to the best of my knowledge I have followed the tutorial instructions. My java knowledge is at a beginner level.

Can you please have a look and provide guidance on how I can move past this stage and continue building my expandable text boxes?

1 Like

Update - managed to figure out how to get past this hurdle… working through some other technical issues that have appeared… will post more if I need more help.

Hey there. I’m stuck on the same issue. I still see 40 characters and errors in the code. Could you let me know how you overcame this hurdle please?

I’d love an update as well. I have input the code, change identifiers and still have full page of text. Unable to test button.

Hi @ tguz84
I would like some help with the same problem too

Tguz84. I am getting the exact same bug. It’s not logging variable shortText. How did you get past it?

Anyone has the solution?

Same problem

This tutorial should have complete coding samples! Here is my 7 hours of piecing it together for https://www.nationalsmarthome.org/UserProfileData/Josh.

replace:
“dynamicDataset”
profileBio
text46
button6
with your variables
this is for show more / show less button function.

let fullText;
let shortText;
$w.onReady( function () {
$w(“#dynamicDataset”).onReady( function () {
const shortTextLength = 100;
fullText = $w(‘#dynamicDataset’).getCurrentItem().profileBio;
$w(‘#text46’).collapse();
$w(‘#button6’).collapse();
} else {
if (fullText.length <= shortTextLength) {
$w(‘#text46’).text = fullText;
$w(‘#button5’).collapse();
} else {
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#text46’).text = shortText;
}
}
});
});
export function button6_click(event) {
if ($w(“#text46”).text === shortText) {
$w(“#text46”).text = fullText;
$w(“#button6”).label = “Show less”;
} else {
$w(“#text46”).text = shortText;
$w(“#button6”).label = “Show more”;
}
}

Thanks for posting this. I’ll try and get back with the results soon.