Expandable Text Box w Show More Button Issue

Hello,
I am brand new to Corvid and coding in general, and attempting to include a paragraph on a website where the first part of the paragraph is shown on page load, with a show more button, and the show more button activation will display the entire paragraph.

I followed the instructions on Wix’s site on how to do this:
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

The code works, however, when the page loads, the show more button position is very low on the page.

This is how I set up the page, per the instructions on the tutorial (I had both the text and button element selected when I created this screenshot, to show how I position the button right at the bottom edge of the text box border, as the tutorial indicated:


And this the the code I am using:


When previewing the page, the “Show more” button is very low on the page, and not directly under the shortened text:


When selecting the show more, the full text appears, and the button title changes to “Show Less” (this is working correctly):


So basically, the “Show more” button position never changes and remains static. How can I have the position of the “Show more” button directly under the shortened text when the page loads, and then under the complete text when the button is selected?

Any help is greatly appreciated.

Thank you.

1 Like

After testing the above, I realized that if I GROUP the text element and the button, the above does in fact work correctly. The only issue is, if I have content on the page BELOW this expanding/collapsing element, there is still going to be a large space before the next element, positioned lower on the page when the text is in the “collapsed” position. Is there a way to acheive this, have the page content below the above feature adjust it’s position?

Simply try clicking on preview and changing your display from the full text to the short text version and then click back to the editor.

You should then see the short text display and you can simply move the elements underneath it to where you want them.

Then when the user clicks on your show more button, then as it expands your text box to show the full text, it will then push everything underneath it down to allow for the larger box.

https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size

@givemeawhisky Thanks so much for the reply. I tried what you said. I went into a preview of the page, changed the display to the short text version, and then clicked back into the editor.

As soon as I hit “back to editor” the display of the page immediately and automatically went into the full text version, it did not stay in the short text version when in preview mode.

Hello Daniel,

I am experiencing this same exact issue. Did you find a resolution?

Hi Akeaton,

Unfortunately, I did not.

I (can’t believe I) just figured it out! So, here’s what fixed my problem…

I put my cursor at the end of the text, and deleted any extra spaces and returns. Then with my mouse, I dragged the bottom of the text box alll the way up as far as it would go. Not just to the bottom of the text, but all the way up. Of course, the bottom line of the box stops at the bottom of the text, but there must have been a tiny bit of extra height on the box that was throwing everything off. I then repositioned the Show More button to touch the bottom of the text box (showing the pink line)… and voila. It worked like a charm.

At first I thought it might be because I had anchors on my page, but apparently that didn’t have anything to do with the problem. It now works with the anchors.

Let me know if you have any questions and if this works for you. Good luck!

– Amanda

Hi Amanda, Thanks so much, it looks like it worked for me as well! I tried to raise the bottom of the text box border above the text. As you stated, the border would not go above the last line of text, but I guess like you said, this action may have removed some minor extra height.

You still had to GROUP the text and the “show more” button, correct?

Thanks so much!

1 Like

@dacreativedesign Yay! That’s awesome it worked for you, too! Mine did not have to be grouped, but your page may be different.

I’m really glad we figured out a solution to this, and hopefully it will help others who experience this issue. Wix might want to consider making a note of this in their tutorial if ours were not isolated incidents.

1 Like

Hey there, I have the exact same problem with my “Show More/Show Less” toggle buttons. Unfortunately, these tips are not working out for me so far. Does anybody has any other suggestion maybe?

Amanda, thank you so much! I’ve struggled with this for two days, and your simple fix finally solved the problem!

Closely follow the Corvid Tutorial: Creating a Show-More Link . It explains precisely what’s needed.

1 Like

Hello - looks like this thread is old but I am hoping someone will see my question. I created the Read More / Read Less buttons without issue. My problem is that the surrounding column or box stays the same height (which defeats the whole purpose of using this feature). Does anyone know how to collapse the white background box that the text resides in? Please see example “5 Best Things to Do On a Boardwalk” at: https://support.wix.com/en/article/velo-tutorial-expand-text-with-a-read-more-link. Thanks! Linda