Expandable text box- read more button doesn't move with text

Discussion Ask a question
,
1

I’m creating and expandable text box on my website following the directions here: https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code

The “Show more” button does not relocate to the bottom of the text box when the character limit is set when the page loads. Basically the button stays in its set spot even though its connected to the bottom left corner of the text box.

Here is the full code I’m using:

let fullText;
let shortText;

$w.onReady( function () {
const shortTextLength = 40;
fullText = $w(“#text28”).text;
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(“#text28”).text = shortText;
});
export function button1_click(event, $w) {
if ($w(“#text28”).text === shortText) {
$w(“#text28”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
$w(“#text28”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}

2

Hello Anthony

My suggestion is to add the button under the text box before adding the text then add the text to the text box, check how it goes:

I hope this works well!

Massa

3

Hi Massa, I tried your suggestion, but I am still having the same problem, is there another way of solving it? Thanks a lot for your time!

4

I am also having a problem with the big empty space under the ‘less’ text. The read more button works fine, but when the full text is collapsed, there’s a huge gaping hole. The code works fine on one of my pages, but after copying and pasting to the second page, and changing the number of characters and the text box ID# only, here is the code with corresponding result

811×484 26.4 KB

892×890 132 KB

5

I can’t seem to get my button work at all. It seems as if it’s covered by something. I’ve tried moving with no results.