Hiding an Empty Repeater

Ask the community
,
1

Hi everyone. I am VERY green… and a little embarrassed that I can’t figure this out on my own.
I have designed a website for a musician who would like to display a list of current and previous concerts.

I created a dataset that includes all of the relevant information and linked it to a repeater. For some of the concerts, there are two days that are displayed side by side. Everything functions beautifully on the desktop version, but when I view it on mobile, there is a large blank space.

Desktop Version:

1978×568 140 KB

If only one concert looks like this:

1974×322 135 KB

Mobile Version:

626×684 205 KB

Mobile Version with only 1 Concert: (I want to get rid of the empty space)

After reading all the relevant threads I could find, I came across this code:

import wixData from 'wix-data';
$w.onReady(function () {
     $w("#dataset1").onReady(() => {
 var item = $w("#dataset1").getCurrentItem();
 if (item["linkItemTwo"] === undefined)
        $w("#button5").hide();
 else $w("#button5").show() ;
     });
});

My data set is also #dataset1. I changed linkItemTwo with the Field Key which is “secondDateandTime” and the field I wanted to hide on the site was #text126

It read:

import wixData from 'wix-data';
$w.onReady(function () {
     $w("#dataset1").onReady(() => {
 var item = $w("#dataset1").getCurrentItem();
 if (item["secondDateandTime"] === undefined)
        $w("#text126").hide();
 else $w("#text126").show() ;
     });
});

When I previewed the page with the code, the #text126 was gone across the page whether there was content in the dataset or not.

What am I doing wrong?
Any help is greatly appreciated!

-Allison

2

Try not just to show or hide an element. Try also to use—>

$w(‘#myElementID’).collapse()
$w(‘#myElementID’).expand()

Perhaps this can help you out.

3

Hi

Using hide(), the element will be hidden on the page, while still reserving its space on the DOM structure, to remove the space, you need to use collapse() instead.

if (item["secondDateandTime"] === undefined) {
        $w("#text126").collapse();
} else {
        $w("#text126").expand();
}

Hope this helps~!
Ahmad

4

Thank you! I will give this a try! :slight_smile:
I appreciate the help!

5

Thank you so much. I will give this a try! :slight_smile:

6

When I tried the two solutions above, it removed all of the second concert content altogether. :confused:

7

What does that mean? I just changed what needs to be done on your selected element, I did not change the element. Maybe you’re not doing it right.

8

@ahmadnasriya sorry - I didn’t explain that properly. How do you add the fields to collapse and expand another field right after. I need to expand and collapse 4 fields.

9

Any other ideas? :slight_smile:

10

@allisonkubala
Already solved here ?