Show-more/less Link - Text loses its formatting

Ask the community
,
1

I followed this very helpful tutorial (link below) to create a show-more/less functionality on my website. For the most part, it’s worked great! The only issue I’ve run into is that regardless of how I have formatted the text in the text editor, the text in the text box reverts back to its original uniform formatting (all one color, all one size, nothing bolded or italicized) in both the short text and full text versions. I’d love retain the formatting distinctions I’ve made in the text editor and the functionality of the show-more/less button. How can I have my cake and eat it too? Help me Corvid Forum, you are my only hope!

Any direction would be greatly appreciated! :slight_smile:

https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

2

Yes. To keep the formatting you’ll need to use the html property of the textbox, and you can’t just follow the tutorial.

3

It’s not easy to explain how to use the html since it needs to be tailored to the specific text and format.
So instead of that, let me suggest a shortcut:

  1. Have 2 different texts-boxes

  2. In textbox1 put your full text, set it to be collapsed by default.

  3. In textbox2 put your short text. Set it to be expanded by default.

  4. Then use a condition to expand and collapse the relevant text-boxes.

4

Thank you, J.D. Any chance you could give me an example of what you mean? I’m a newb so some terminology goes over my head a bit!

5

@brennan_kannapell

  1. Add 2 text-boxes to your page (text1, text2).

  2. Right below text1, put text2.

  3. Right below text2 put the “Show more” button.

  4. You can also group these 3 elements into one group, that may help with the collapse and exapnd functions.

  5. In text1put the short text.

  6. In text2, put the full text.

  7. Click on text2, go to the property panel, and check the “collapsed on load”.

  8. put the following code inside the $w,onReady() function (don’t use any of the code from the tutoria)l:

$w("#button1").onClick((event) => {
    if ($w("#text2").collapsed){
        $w("#button1").label = "Show less";
        $w("#text1").collapse();
        $w("#text2").expand();
    } else {
        $w("#button1").label = "Show More";
        $w("#text2").collapse();
        $w("#text1").expand();
    }
})
6

@jonatandor35 I will give that I try! Thank your for your advice!

7

Thank you, J.D! It worked like charm!

8

You’re welcome :slight_smile: Glad to help.

9

Thank you for the tip JD. It isn’t clear to me how the page display just one text box at a time, but after I put the code in, perhaps that will be more apparent.

10

Don’t forget to make box2 collapsed on load (see bullet number 7 in the instructions above).

11

Am working on page now. We’ll see how I do.

12

Well, shoot. This occurs to me. The text is in a repeater and we will have articles of different length. Does the full text box actually have to be large enough on the page to accommodate the full text? If so, we’ll have blank space between articles because I’ll have to put a long box in for long articles that won’t be filled by shorter articles.

13

It’s a textbox not a box, and it’s supposed to automatically extend or shrink based on content.

14

@jonatandor35 Ok. Makes sense. However, I have the code in and it’s showing the expanded version. It’s also showing it in white. I think that’s a rich text issue and have gone back several times to reformat it. But, I put the text boxes in backwards the first time. It showed the full text with a Show More button. I reversed the box names in the code and still get the full text with a show more button.

This is the code. #text26 is the short text. #text28 is the full version.
$w(“#button3”).onClick((event) => {
if ($w(“#text28”).collapsed){
$w(“#button3”).label = “Show less”;
$w(“#text26”).collapse();
$w(“#text28”).expand();
} else {
$w(“#button3”).label = “Show More”;
$w(“#text28”).collapse();
$w(“#text26”).expand();
}
})

15

@jonatandor35 Here is the site URL so you can see the page: https://www.lanewriters.org/news

16

@jonatandor35 This code also seems to apply itself to the entire repeater, so every article in the repeater shows more. Would that be true?

17

@lanewriters you have an error in your code (you put an element selector outside the onReady() function), so fix it first and then we’ll see.

18

@jonatandor35 Sorry to be such a greenhorn. I’ll fix that, but please be very specific. What is the onReady() function?

19

@lanewriters any reference to a graphic elements (buttons, repeaters, texts etc… ) must be inside:

$w.onReady( function() {
//here you can refer to elements
})

Or to be in a function that is called from inside the onReady();

20

@jonatandor35 When I go back and look at your original instructions just above the code, I see that the code should be in that onReady(). How should that line of code read. My page is missing it.