How to make expandable/collapse text with button text that can change from "read more" to "read less"?

Ask the community
1

Hi Community X!

i’m new at EditorX and have no experience in coding and i tried finding similiar forum about making expandable/collapse text with button text that can change from “read more” to “read less” and i’ve found this forum but it’s for FAQ page

i’ve copied the code from the answer and modified the UI a little and the expandable/collapse text is work but now im struggling on replacing the button with text “read more” to “read less”

here is the look of it and the coding from the forum above

1907×785 42.8 KB

$w . onReady ( function () {
answerExpanded = false ;

$w ( '#button' ). onClick (() => { 
    answerExpanded  ?  $w ( '#answer' ). collapse () :  $w ( '#answer' ). expand () 
    answerExpanded  = ! answerExpanded ; 

});

});

thank you.
Yanuar

2

@yanuarcahyatriputra You might want to post this question on the Velo forum (https://www.wix.com/velo/forum/coding-with-velo), but, in the meantime…

First, a caveat – I’m just learning both Javascript and Velo, so taking my advice could be risky :wink: Nonetheless, I think this works:

$w . onReady ( function () {
let answerExpanded = false ;

$w ( '#button' ). onClick (() => { 
    if  ( answerExpanded ) { 
        $w ( "#answer" ). collapse (); 
        $w ( "#button" ). label  =  "Read more" ; 
    }  **else**  { 
        $w ( "#answer" ). expand (); 
        $w ( "#button" ). label  =  "Read less" ; 
    } 
    answerExpanded  = ! answerExpanded ; 
   
});

});

The key is that you can access the button label using: buttonName.label. I used a non-compressed if … else… because I’m still at a point in my learning process where I understand that better.

3

Thanks Jim, Very helpful

4

You can also try this since multi-state boxes are now available. https://support.wix.com/en/article/velo-tutorial-expand-text-with-a-read-more-link