Show or hide selected buttons in the repeater

Ask the community
1

I’m trying to hide specific buttons in a repeater based on certain conditions, but I’m running into issues. Could anyone guide me through the correct approach?

2

I imagine you want different buttons showing per item?

If so, it’s going to require some code. Are you able to share a little more about your setup, what you want to show when and code you’ might have already tried?

3

I did a video a while back using the CMS on adding conditional visibility and while mines works within a dynamic page, it’s a similar concept within a repeater.

I tried something like in my video with a repeater and the main difference is to adjust it to work within each repeater item.

$w.onReady(function () {
    // Set up the onItemReady handler for the repeater
    $w('#repeater1').onItemReady(($item, itemData, index) => {
        // Collapse #imageX2 if 'mainMedia' field is empty or not present
        if (!itemData.swatchImage) {
            $item('#imageX1').collapse();
        } else {
            $item('#imageX1').expand();
        }

        // Collapse #text10 if 'colorName' field is empty or not present
        if (!itemData.colorName) {
            $item('#text10').collapse();
        } else {
            $item('#text10').expand();
        }

        // Collapse #text11 if 'rgbValue' field is empty or not present
        if (!itemData.rgbValue) {
            $item('#text11').collapse();
        } else {
            $item('#text11').expand();
        }

        // Collapse #text23 if 'hotCold' field is empty or not present
        if (!itemData.hotCold) {
            $item('#text23').collapse();
        } else {
            $item('#text23').expand();
        }
    });
});

Here’s how you can see some of the items are not collapsed since the CMS is empty. https://robertor0.wixstudio.com/my-site-53#comp-m9lqn0m2

4

Hi, good day,

My colleague and I created a page for our team’s publications, and we’d like different buttons (with names) to show per item. Currently, we’re using a repeater connected to a dataset.

What we’d like is for a button to display only when a name tag exists for that item, and to be hidden when it doesn’t.

I haven’t tried much code yet, so I’d appreciate any guidance on how to set this up.

Thanks a lot!

5

HI Rob, we will try and see how it goes. Thank you

6

Hope it helps. Definitely check the IDs of elements. In my example, the text isn’t semantic but the CMS fields are. I find it works best when starting off to name things closely so it can be easily read and worked with (and really should always be done but I tend to forget when making examples and tutorials for others).

This should help you get started if you haven’t coded much before. Getting Oriented