Expandable Text Box Code - Button Behavior

I’m implementing the expandable text box using the instructions at https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code The basics are working. Except when the page loads, the full text and the Show more button display (instead of the short text and the Show more button. Also, after Show More is clicked, the short text is displayed, but the button still says Show more and is still positioned at the end of the full text.

The code is below:

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
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 = 547;
// read the full text and store it in the fullText variable
fullText = $w(“#text4”).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(“#text4”).text = shortTextLength;
//TODO: write your page related code here…

});

export function button1_click(event, $w) {
// check the contents of the text element
if ($w(“#text4”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text4”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text4”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}

2 Likes

I’m having this issue too with the Show More button being positioned at the end of the text so there is a huge space in between. Did you find a solution to this?

I’m afraid I did not find a solution. I had two paragraphs of text and wanted to use Show More for each paragraph because the long first paragraph pushed the second paragraph too far down the page. I ended up using two tabs so that when the page loads it is obvious that there are two sets of copy.

Bummer! So you have 2 buttons so that they aren’t all the way down a blank-looking page?
It’s weird because the button moves on the mobile version, but it doesn’t on the desktop. Thanks for the update!