Expandable Text Box

Ask the community
,
1

I created an expandable text box. It works BUT come weird text/content appears in between paragraphs (i.e.  ). ANybody know why?

Link to the page: https://mnfwebsolutions.wixsite.com/website-25/copy-of-history

2

Hi,

First of all, cool site - really interesting.

To be honest, not really sure why this is happening, but I think that the text routines are trying to be “too smart”. I changed .text to .html and it seems to work OK.

let fullText;
let shortText;
$w.onReady(function () {
			const shortTextLength = 350;
			fullText = $w("#inghamHistory").html;
			shortText = fullText.substr(0, shortTextLength) + "...";
			$w("#inghamHistory").html = shortText;
			});
export function showMore_click() {
			if ($w("#inghamHistory").html === shortText) {
			    $w("#inghamHistory").html = fullText;
				$w("#showMore").label = "Show less";
			} else {
				$w("#inghamHistory").html = shortText;
				$w("#showMore").label = "Show more";
			}
		}

Let me know if this works OK for you.

Yisrael

3

Thanks for your kind words.

The work-around works! :smiley: Though initially, the HTML code appeared on the site! lol

https://www.useloom.com/share/99fb2c60a0b84a17b764c27c3907f592

Thank you so much for your quick response, Yisrael. Much appreciated!

4

Glad it worked out for you.

BTW - See this article on NBSP . So, the “weird” text that you refer to isn’t completely weird - then again, my mom still thinks I’m cute.

5

BTW2 - I’m going to pass this issue on to QA and see if they’ve got something interesting to say.

6

Haha! Thanks again. Heading of to dreamland now. :slight_smile:

7

Hi,

I’m a QA guy. :slight_smile: Yisrael kinda went in the wrong direction when he suggested that you should use the ‘html’ property everywhere; actually, the better plan is to use the ’ text ’ property everywhere. Since you’re not formatting your text, there’s no reason to use ‘html’; using ‘text’ keeps things nice and simple. And this line:

shortText = fullText.substr(0, shortTextLength) + "...";

doesn’t work correctly because ‘shortText’ is taking a substring of the html-formatted text, which includes all the html tags and such. And then when you do this:

if ($w("#inghamHistory").html === shortText) {

the comparison is false because the current html contents don’t match the strangely-chopped-up html string in ‘shortText’.

Anyway, if you just use the ‘text’ property everywhere, it works great. Here:

let fullText;
let shortText;
$w.onReady(function () {
 const shortTextLength = 350;
            fullText = $w("#inghamHistory").text;
            shortText = fullText.substr(0, shortTextLength) + "...";
            $w("#inghamHistory").text = shortText;
            });
export function showMore_click() {
 if ($w("#inghamHistory").text === shortText) {
                $w("#inghamHistory").text = fullText;
                $w("#showMore").label = "Show less";
            } else {
                $w("#inghamHistory").text = shortText;
                $w("#showMore").label = "Show more";
            }
        }

Take a look at the documentation for more information about using ‘text’.

Hope this helps!

8

Hi Chaim,

Thanks for your response. I actually used the same exact JS on the site which prompted the original earlier post (see above) where I am seeing a bunch of &nbsps scattered throughout the whole text content.

Please see video: https://www.useloom.com/share/25d172fd85074b3fac82beffc3ac32e1

9

Hi,

So… I must have missed those little guys the first time I tried out your code. Sorry about that! Thanks for the video — that was really helpful.

This behavior does appear to be a bug. Using ‘.text’ should have worked but it’s apparently doing some strange things. I’ve alerted the developers about it.

Yisrael’s workaround seems to work ok but it’s not ideal because for the shortText, you’re basically taking an html string and chopping off all the end tags. So you’re dependent on the browser to “guess” what the right thing to do is.

Here’s an improved version of Yisrael’s code that doesn’t suffer from the problem you mentioned earlier (“Though initially, the HTML code appeared on the site!”):

let fullText;
let shortText;
$w.onReady(function () {
	const shortTextLength = 350;
	fullText = $w("#inghamHistory").html;
	shortText = fullText.substr(0, shortTextLength) + "...";
	$w("#inghamHistory").html = shortText;
});
export function showMore_click() {
	if ($w("#inghamHistory").html.length < fullText.length) {
		$w("#inghamHistory").html = fullText;
		$w("#showMore").label = "Show less";
	} else {
		$w("#inghamHistory").html = shortText;
		$w("#showMore").label = "Show more";
	}
}

Hope this helps!

10

The good news is that Chaim said that I might not be as dumb as I look.

11

LOL You folks are too funny. Yisrael, you’re a smarty-pants. :slight_smile:

The other good news is: I tried the solution and IT WORKS!

Thank you both so much for all your hard work. You are all amazing.

12

Aw man, I wish I’d seen this sooner! I had the same issue and after getting no response from my Wix support ticket, I made a workaround that might be helpful to some.

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.

The expandable box is here (scroll to the bottom of the page):

13

The code does not seem like a complete solution. The page still shows the html, up to the point the user selects the button. How do we make that code appear as text instead of HTML?

14

I was able to get rid of them by deleting the extra space between words in the text box.

15

Can you explain better how you did to solve this?

16

Hello friends. I tried to use this code in a text and it worked, however, when I link to the database it doesn’t work. How would you use this code with text from a particular database? Thank you.