So I looked at a couple of Q&A posts to create expandable text boxes on my wix website. I was able to make the expandable text boxes, but in between words in my text box there are ' ' instead of just a space. I tried fixing it by adding
fullText = fullText.replace(' ', ' ');
in my code, but it does not look like that did the trick. I read a Q&A post where it says to replace .text with .html, but that also did not fix the problem for me. Is there any other way to remove this annoying html entity?
I am fairly new to coding (maybe really new to coding...), so I might have done something wrong as well. Below code is what I have for the expandable text box. Any help is appreciated!!
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () { const shortTextLength = 40; fullText = $w("#text3").text; shortText = fullText.substr(0, shortTextLength) + "..."; $w("#text3").text = shortText; }); export function button1_click(event, $w) { if ($w("#text3").text === shortText) { fullText = fullText.replace(' ', ' '); $w("#text3").text = fullText; $w("#button1").label = "Show Less"; } else { $w("#text3").text = shortText; $w("#button1").label = "Show More"; } }
Thanks!
Jiwoo
Hi All,
You can refer to this step-by-step example on how to create expanding / collapsing boxes. It worked for me. Cheers, Ben
Check this post out...
https://www.wix.com/code/home/forum/community-discussion/expandable-text-box
YES! This happened to me too, and I never got a reply from Wix support. I ended up making a workaround that is quite different but that I ended up liking better.
Essentially, instead of expanding the text alone, you're expanding the box itself. This way you get to keep the text formatting from getting messed up, plus you get to easily control what goes above/below the collapse, so it doesn't cut you off mid-word.
What I did was create a box container, put a text box in it, and add a vector image of a downward arrow to be the expander. This was the condensed version of the text box.
Then I copied and pasted the box and dragged the new version right below the first so their edges were touching -- then it looked like one big box. I flipped the arrow around to face up, and this would become the section added to make the expanded version of the text box.
Then I set the second box to be collapsed on load, and added the following code (of course you'd want to replace all element names with your own):
export function vectorImage3_click(event, $w) { $w('#box2').expand(); $w('#vectorImage3').hide(); } export function vectorImage2_click(event, $w) { $w('#box2').collapse(); $w('#vectorImage3').show(); }
In this example, Vector Image 3 was the expand arrow and Vector Image 2 was the collapse again arrow. This code also hides the expand arrow while the box is expanded, and then shows it again upon collapse.
I'm sure this wouldn't work for all needs, but I hope it's helpful to some!
Massa,
here's the screenshot of my paragraph. It happens in other places too when the text box is expanded, and sometimes the location of " " changes (appears at different locations). I don't understand why the code works for some people but not for others!
Cara, I have not had a problem with the font size -- at least not with '.text', but when I tried changing .text to .html my fonts became very small.
I am having the same problem. and other characters show up in a few places that should be spaces or apostrophes. Also, the affected paragraph's font size is suddenly much larger (it should be 15, looks like it made the entire section size 22 like the top two lines).
The website is Summerfest18.com in the 2018 EMERGING ARTIST section.
Screenshots are of correct text and font size (as seen in editor) and how it appears published or in preview. The code is the ONLY code I have edited on the whole page (or site for that matter).
Hello Jiwoo
your code seems to work fine for me !
can you explain more what's the problem (show screen shots if possible ), and make sure your making the box's size fit enough with the full text you want.
Massa