Collapse is not working

Ask the community
9

Hi @angiepoon924 , collapse/expand text with a read more link can be achieved in a few ways using Velo (code is below each solution):

The first one is by adding the same text twice (one time in its shorter version and the other time in the full version), dock both of them the same, and then use the show/hide options.

$w('#op1Small').onClick(() => {
        $w('#op1Large').show();
        $w('#op1Small').hide();
 });

    $w('#op1Large').onClick(() => {
        $w('#op1Small').show();
        $w('#op1Large').hide();
 });

The second way is also to add the same text twice (again, one time in its shorter version and the other time in the full version), dock both of them the same, and then use the expand/collapse options.

$w('#op2Small').onClick(() => {
        $w('#op2Small').collapse();
        $w('#op2Large').expand();
 });

    $w('#op2Large').onClick(() => {
       $w('#op2Large').collapse();
       $w('#op2Small').expand();
 });

Last but not least, Changing the inner HTML.
This time you’ll not need to add the text item twice but only once, and inside the code, you need to have both the long version of the text and the shorter version of it.

let state = true;
    $w('#op3').onClick(() => {
        $w('#op3').html = (state) ? `<h2>Avenir Light is a clean and stylish font favored by designers. It's easy on the eyes and a great go to font for titles, paragraphs & more.</h2>` : `<h2>Avenir Light is a clean and ...</h2>`;
 if (state) state = false;
 else state = true;
 });

I’ve added a link with examples here.

Hope it all works for you, Let me know if you have any more questions =)