Collapsible Content

Ask the community
,
1

I would like to see a function where you can hide text, image, video and make them visible with a “Show more” button or text. At the moment there is only the Show more text function which only shows three lines of text and is not configurable let alone supports images or video.

2

Hi!

This might be what you’re looking for. :slight_smile:

https://community.wix.com/partners/forum/partner-announcements/feature-release-collapsible-text-in-the-wix-editor

3

@stevenjose No its not what im looking for.

4

This is 110% achievable with Velo

5

I know, but i dont know how to code it!

6

@tamino-haas Not everything is going to be able to be turned into a component on Wix.

You’re going to need something like this if you want to show and hide the element:

$w.onReady(function () {

    $w('#buttonID').onClick(() => {
        if ($w('#elementID').hidden) {
            $w('#elementID').show();

        } else {
            $w('#elementID').hide();
        }
    })
})

or if you want to expand and collapse the element you would need this:

$w.onReady(function () {

    $w('#buttonID').onClick(() => {
        if ($w('#elementID').collapsed) {
            $w('#elementID').expand();

        } else {
            $w('#elementID').expand();
        }
    })
})

In both examples, you would need to change the buttonID for the id of the button you are using to trigger the expand/collapse or show/hide

And you will need to change elementID for the element id of the element you want to expand/collapse or show/hide

7

@noahlovell Thank you very much for your help so far is it also possible to have a button that shows “read more” and at the bottom it has one that shows “read less”

8

@tamino-haas Yeh, it is possible. Give me a couple of minutes and I’ll show you how to do it

9

@tamino-haas here they are

Show and hide:

$w.onReady(function () {

    $w('#buttonID').onClick(() => {
        if ($w('#elementID').hidden) {
            $w('#elementID').show();
            $w('#buttonID').label = "Read More"
        } else {
            $w('#elementID').hide();
            $w('#buttonID').label = "Read Less"
        }
    })
})

Expand and collapse:

$w.onReady(function () {

    $w('#buttonID').onClick(() => {
        if ($w('#elementID').collapsed) {
            $w('#elementID').expand();
            $w('#buttonID').label = "Read More"
        } else {
            $w('#elementID').collapse();
            $w('#buttonID').label = "Read Less"
        }
    })
})

EDIT: You are likely going to want to label the button within the editor as Read More to begin with