Large, Annoying Space after Using "Show More" / "Show Less" w/ Wix code

Ask the community
,
1

Hey there,

So I’m editing my work’s website and keep getting a large, annoying space after the text when I use a series of “show more” and “show less” buttons." It isn’t there in the editor but only in preview/live mode. See my screenshot or visit https://www.playmoreandprosper.com/counseling .

1905×858 109 KB

Obviously, the space is filled if “show more” is clicked. But there doesn’t seem to be a way to remove it when the “show more” buttons are not clicked. Is there any way to remove the blank space? I’ve copy and pasted my current code.

let fullTextone; //#text37
let shortTextone; //#text37
let fulltexttwo; //text62
let shorttexttwo; //text62
let fulltextthree; //text63
let shorttextthree; //text63
let fulltextfour; //text73
let shorttextfour; //text73
let fulltextfive; //text74
let shorttextfive; //text74
let fulltextsix; //text75
let shorttextsix; //text75

$w.onReady( function () {
const shortTextoneLength =106;
fullTextone = $w(‘#text37’).text;
shortTextone = fullTextone.substr(0, shortTextoneLength) + “…”;
$w(‘#text37’).text = shortTextone;
const shorttexttwolength = 67;
fulltexttwo = $w(‘#text62’).text;
shorttexttwo = fulltexttwo.substr(0, shorttexttwolength) + “…”;
$w(‘#text62’).text = shorttexttwo
const shorttextthreelength = 126;
fulltextthree = $w(‘#text63’).text;
shorttextthree = fulltextthree.substr(0, shorttextthreelength) + “…”;
$w(‘#text63’).text = shorttextthree
const shorttextfourlength = 102;
fulltextfour = $w(‘#text73’).text;
shorttextfour = fulltextfour.substr(0, shorttextfourlength) + “…”;
$w(‘#text73’).text = shorttextfour
const shorttextfivelength = 94;
fulltextfive = $w(‘#text74’).text;
shorttextfive = fulltextfive.substr(0, shorttextfivelength) + “…”;
$w(‘#text74’).text = shorttextfive
const shorttextsixlength = 72;
fulltextsix = $w(‘#text75’).text;
shorttextsix = fulltextsix.substr(0, shorttextsixlength) + “…”;
$w(‘#text75’).text = shorttextsix

});

export function button21_click(event, $w) {
if ($w(‘#text37’).text === shortTextone) {
$w(‘#text37’).text = fullTextone;
$w(‘#button21’).label = “>> Show Less”;
}
else {
$w(‘#text37’).text = shortTextone;
$w(‘#button21’).label = “>> Show More”
}}

export function button22_click(event, $w) {
if ($w(‘#text62’).text === shorttexttwo) {
$w (‘#text62’).text = fulltexttwo;
$w (‘#button22’).label = “>> Show Less”;
}
else {
$w(‘#text62’).text = shorttexttwo;
$w(‘#button22’).label = “>>Show More”;
}}

export function button24_click(event, $w) {
if ($w(‘#text63’).text === shorttextthree) {
$w(‘#text63’).text = fulltextthree;
$w(‘#button24’).label = “>> Show Less”;
}
else {
$w(‘#text63’).text = shorttextthree;
$w(‘#button24’).label = “>> Show More”;

    }}

export function button23_click(event, $w) {
if ($w(‘#text73’).text === shorttextfour) {
$w(‘#text73’).text = fulltextfour;
$w(‘#button23’).label = “>> Show Less”;
}
else {
$w(‘#text73’).text = shorttextfour;
$w(‘#button23’).label = “>> Show More”;
}}

export function button25_click(event, $w) {
if ($w(‘#text74’).text === shorttextfive) {
$w(‘#text74’).text = fulltextfive;
$w(‘#button25’).label = “>> Show Less”;
}
else {
$w(‘#text74’).text = shorttextfive;
$w(‘#button25’).label = “>> Show More”;

}

}

export function button26_click(event, $w) {
if ($w(‘#text75’).text === shorttextsix) {
$w(‘#text75’).text = fulltextsix;
$w(‘#button26’).label = “>> Show More”;
}
else {
$w(‘#text75’).text = shorttextsix
$w(‘#button26’).label = “>> Show Less”;
}}

Thanks,

Anne

2

Have a read of this from the start of July.
https://www.wix.com/corvid/forum/community-discussion/adding-several-expandable-text-boxes-with-read-more-links

3

Also check out this thread:
https://www.wix.com/corvid/forum/main/comment/5d1ac48db0088400b738c2ea

4

Anne,
One way to get rid of the unwanted space is to put the short text (or even 1 character) in the textbox itself (i.e. on the editor), and then assign the short or full texts via code. If you do so, and put the next element right below the textbox, you won’t have this space.

5

Thanks everyone for the responses!

J.D., could you give me an example of what that looks like - because I thought I was already doing that, but I’m really new to this! So, for example, what I’m doing is putting text37 as both fulltextone and shorttextone. Should I be doing something differently? Here’s a picture of the design and code, and again, thanks for the help:

Picture:


Code:

let fullTextone; //#text37
let shortTextone; //#text37
$w.onReady( function () {
const shortTextoneLength =106;
fullTextone = $w(‘#text37’).text;
shortTextone = fullTextone.substr(0, shortTextoneLength) + “…”;
$w(‘#text37’).text = shortTextone;
export function button21_click(event, $w) {
if ($w(‘#text37’).text === shortTextone) {
$w(‘#text37’).text = fullTextone;
$w(‘#button21’).label = “>> Show Less”;
}
else {
$w(‘#text37’).text = shortTextone;
$w(‘#button21’).label = “>> Show More”
}}

Any ideas on what I should do differently?

Thanks!

Anne

6

instead of:

 fullTextone = $w('#text37').text;

you can write:

 fullTextone = "this is my full text my full text my full text my full text...."; //use your actual full text

and in the text-box itself (on the editor) put 1 character only

7

Now I feel a little dense for not catching on right away- that worked perfectly! Thanks so much. :slight_smile:

8

You’re welcome :slight_smile:

9

@jonatandor35 Very new to coding, so this may be a stupid question, but is there a way to add in paragraph breaks to the above coding. I used it to solve a formatting issue where the toggle was far below the text, but ideally the text will have paragraph breaks.

10

@tizzyernstoff if you want to break a line, you can add:
\n
(back slash + n)

For example, the text

Dear customer,
How are you?
Thanks for contacting us.

will be coded as:

fullText = "Dear customer,\nHow are you?\nThanks for contacting us.";
11

@jonatandor35 If only JS borrowed triple quotes from python… sad face.

12

@skmedia yes. If only…