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.
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
Now I feel a little dense for not catching on right away- that worked perfectly! Thanks so much. :)
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
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.
Also check out this thread:
https://www.wix.com/corvid/forum/main/comment/5d1ac48db0088400b738c2ea
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