Problem with: "Wix Code Tutorial: Creating a Show-More Link"

I used the following WIX tutorial to create expandable text boxes with read-more links.

Wix Code Tutorial: Creating a Show-More Link
https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link

I figured out how to use the code and it works great, except for…

When you preview the page there is a huge gap between the footer and the last element (any element) on the page. This blank space appears to be the total length of all the expandable boxes as if they were expanded at the same time. If you expand every expandable text on the page it fills in the gap perfectly. It’s as if the footer is not moving up to meet the last element to remove this space. The footer is acting like all of the expandable text boxes are expanded (even though they are not - it is coded to show short version when page is loaded).

Bottom line is that I want to be able to use these expandable boxes, they look and function great on the my site. The only issue is the long gap before the footer…

Does anyone have any possible suggestions? (I have experience with Javascript)

Hey David,

I played around with this and I see what you mean. But

It actually makes sense since the layout is rendered based on “large” (more) text boxes, and there’s no choice but to push the footer down.

I took a simple more-less site and changed it so that it started with showing less , and I added 3 more text boxes (all starting with less) and buttons. When I click on the show more buttons the text expands and pushes things down, but when the fields are in show less mode, everything below (including the footer) moves up.

It seems OK to me. However, if I “didn’t get it”, then let me know where I went wrong and I’ll look closer.

Hello Yisrael,

Thank you for your response. The issue I am having is that when the fields are in show less mode the footer does not move up and I am not sure why.

David

Hi again,

Also, if you increase the volume of text (i.e. X3) in the example you made the footer doesn’t move all the way back up when you click “show less”.

@davidmartin In my test, things got pushed things down with show more , and then everything moved back up with show less .

I also tried the x3 text and it worked fine.

Note: I used Firefox to develop the app, I just tested it with Chrome. I’m using a Mac.

Hi David,

can you please explain me how you managed to use the code? I tried several times without succeeding.

David, did you manage to fix this I’m having the same issue.

This is an old post and will be closed.

Note that each situation is different and requires the relevant information to be able to offer assistance. Please ask you question in a new post with more information: including what code you have, what screen elements, what works, what doesn’t work.