Collapsing "Show More" button is leaving a huge blank space.

Ask the community
, ,
1

I have written a show more button, to collapse a large text box until you click it.

This is the 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 = 208;
// read the full text and store it in the fullText variable
fullText = $w(“#text6”).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(“#text6”).text = shortText;

//TODO: write your page related code here…
});

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

This works fine, but when I preview the page has a huge blank space in it when the text is collapsed. When I expand the text, it removes this huge blank space and looks like how does in edit mode. Is there any way to make the page scale with the expanding text box? Thanks.

2

This question is asked every few days. You should run a search and you’ll probably find many threads.

3

I have and I haven’t found anything that applies, the main solution I saw was to cut delete the strip the text was on and new one, this did not work.

4

@oliver https://www.wix.com/corvid/forum/main/comment/5d1bd54b46c5850042811be3

5

@jonatandor35 So If I put the short text only in the box, like the post advises, where do I put it, in another textbox that is hidden?

6

@oliver
instead of this line:

   fullText = $w("#text6").text;

Try try this line:

   fullText ="full text full text full text"//use your actual full text;

Is it working?

7

@jonatandor35 Apologies, I am new to this. By pasting my whole full text, in the quotation marks, I get

 public/pages/c1dmp.js: Unterminated string constant (8:12)
8

@oliver that’s unexpected, but I can’t help you without seeing the code itself.