Hide Repeater Item Selectively

Ask the community
,
1

Instead of deleting items that I no longer want to display on the page, is there a way to simply hide the item until I want to show it again at a later time?

2

Yes, it is possible, and in more than one way. But first add more details please.

3

I mean: details about how you connected the repeater to the data (via the editor? via code? how do you know what element to hide? Is it a field value in the collection?)

4

@jonatandor35 I inherited this site and am relatively unfamiliar with the way Wix works in this area. As far as I can tell, the prior admin simply added a Repeater with items in it. There are no datasets or code associated with it, simply items. I think it’s just the way he designed the layout, using repeaters, not for any ‘repeating’ purposes as far as I can tell.

5

@vince36561 I can’t offer a solution without any additional info. You should at least let us know, how you’d like the system to “know” which item to hide.

6

@jonatandor35 I don’t need the system to know anything. I want to be in the editor and select to hide an item so that it doesn’t appear on the site at all. Sorry for my ignorance on this but I’m used to Wordpress and its visual editors where you can just say “hide on desktop/mobile/whatever” and it simply won’t appear on the site. I don’t need it to appear/hide based on any conditions.

7

@vince36561 you can try:

let itemsToOmit = [1, 4] ;//put the indices of the items you want to hide. starting from 0;

$w.onReady(function () {
 let counter = 0;
    $w("#repeater1").onItemReady(() => {
 if(counter === 0){
 let fullData = $w("#repeater1").data;
 let visibleData = fullData.filter(e => !itemsToOmit.includes(fullData.indexOf(e)));
        counter ++;
        $w("#repeater1").data = visibleData;
        }
    })
});
8

@jonatandor35 Thanks! How exactly do you access the ability to add code?

9

@vince36561 https://support.wix.com/en/article/getting-started-with-corvid-by-wix
https://support.wix.com/en/article/corvid-working-in-the-code-panel

10

@jonatandor35 Where do you find the index of the individual items?

11

@vince36561 You look at the repeater find the item you wish to omit and counts from the beginning (starting from 0).
There’re better ways to do it, but since you provided no information at all regarding the data, that’s the way you’ll need to count.

12

@jonatandor35 The Repeater contains 3 items, each with some graphics and text inside of them. It’s the third I’m looking to ‘hide’. I replaced the repeater name with ‘repeater#5’ which is what is shown and only placed ‘2’ as the item I want to hide. This is not working, item still shows on the page.

13

@vince36561 Is it ‘repeater#5’ or maybe “#repeater5” ? Check it again.

14

Anyway, if you have no data at all, you’ll need to use a slightly different code:

let itemsToOmit = [1,4];
$w.onReady(function () {
 let repeaterData = $w("#repeater1").data;
    $w("#repeater1").data = repeaterData.filter(e => !itemsToOmit.includes(repeaterData.indexOf(e)));
});
15

@jonatandor35 It’s definitely #repeater5" and correct, there is no data, just containers with different image/text in each manually updated.

16

@jonatandor35 Yep that worked, thanks! I’ll have to ask another question about footers and having to leave space for elements to ‘fit’ on the page separately :slight_smile: