Expandable text - Toggle button problem

Discussion Ask a question
,
1

Hi,

I have just recently discovered that Wix had a feature released which alows me to have explandable textboxes (code), where I had to use FAQ before.

I followed the official wix-guide as to how:
https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code

But unfortunatly im having some trouble getting the “show more/show less” button to work.

In the following URL’s you can have a look at my code and the placement of the button - right below the static text field:

WHAT HAPPENS?

  • As I preview the site the text shortens to the desired amount of characters. The button follows the text and is still displayed right under. BUT, when I click the button nothing happens.

Im hoping one of you have an idea of what i am doing wrong. Help is much appreciated.

Thank you for reading and helping me out.

Kind regards,
Sebastian Skinnerup

PS.
I have searched the forum for answers and several people have had simular issues and solved them. But none of them posted the solution and stopped responding in their own thread when others requested their solution. I will (in case I ever solve it) post answers and how-to for future inquiries. :slight_smile:

2

Hello Sebastion,
I have tried to do it with the code snippet, and changed a bit of the logic for the click event function. Have a look:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
let fullText;
let shortText;

$w.onReady(function () {
 //TODO: write your page related code here...
 const shortTextLength = 3;
    fullText = $w('#text2').text;
    shortText = fullText.substr(0, shortTextLength) + '...';
    $w('#text2').text = shortText;
});

export function button1_click(event, $w) {
    console.log(shortText, fullText);
    if($w('#text2').text === shortText){
        $w('#text2').text = fullText;
    }else {
        $w('#text2').text = shortText;
    }
}

Hope this helps,
Majd