# How to Hide Elements based off other empty Elements?

**URL:** <https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [July 23, 2018, 4:33pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481 "2018-07-23T16:33:19Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![contactborsalino](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contactborsalino/32/5491_2.png) [@contactborsalino](https://forum.wixstudio.com/u/contactborsalino)\
**Post date:** [July 23, 2018, 4:33pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/1 "2018-07-23T16:33:19Z")

</div>

Hi Wix Coders!

I’m trying to create a response on one of my dynamic pages. Hopefully you can help me.

I have a Title box (A) over a Text box (B) (filled by Text Rich data).  
Sometimes there is no data for B, therefore A stands over white space depending on the row the dynamic page connects to.  
I would like to know how to hide A when B is empty.

I’ve tried to used the “How to Hide a Video Player When There Is No Video to Play” [Velo Tutorial: Hiding a Video Player When There Is No Video to Play | Help Center | Wix.com](https://support.wix.com/en/article/how-to-hide-a-video-player-when-there-is-no-video-to-play) as a template and replacing the video IDs by my text elements, however it’s clearly not working.

I’m sure this requires very simple code, but I’m a real beginner at this.

Does anyone know how to code this action?

Thank you!

---

<div class="post-metadata">

**Author:** ![jeromechauveau](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jeromechauveau](https://forum.wixstudio.com/u/jeromechauveau)\
**Post date:** [July 23, 2018, 8:48pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/2 "2018-07-23T20:48:44Z")

</div>

Hi

Could you paste your code?  
Your data is connected to a dataset?

---

<div class="post-metadata">

**Author:** ![contactborsalino](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contactborsalino/32/5491_2.png) [@contactborsalino](https://forum.wixstudio.com/u/contactborsalino)\
**Post date:** [July 24, 2018, 10:12am UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/3 "2018-07-24T10:12:48Z")

</div>

Hi,

This is going to be embarassing.

$w(“#dynamicDataset”).onReady(() =\> {  
**const** item = $w(“dynamicDataset”).getCurrentItem();  
find (“#text29”)  
**if** (!item.text)  
$w(“#group1”).hide();

}

I know I have code missing, but I don’t where to go from there.  
#group1 is the element I’m trying to hide when #text29 is empty.  
How do I create that reaction?

---

<div class="post-metadata">

**Author:** ![jeromechauveau](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jeromechauveau](https://forum.wixstudio.com/u/jeromechauveau)\
**Post date:** [July 24, 2018, 8:45pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/4 "2018-07-24T20:45:11Z")

</div>

Hi

You were close. This below worked fine for me:

```javascript
$w("#dataset1").onReady(() => {
 var item = $w("#dataset1").getCurrentItem();
 if (item["mail"] === undefined) $w("#text18").hide();
 else $w("#text18").show() ;
     });

```

---

<div class="post-metadata">

**Author:** ![contactborsalino](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contactborsalino/32/5491_2.png) [@contactborsalino](https://forum.wixstudio.com/u/contactborsalino)\
**Post date:** [July 25, 2018, 11:27am UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/5 "2018-07-25T11:27:49Z")

</div>

Hi,

Thank you for the reply!  
I’ve pasted your code and replaced the elements, but I’m getting errors.  
My Element IDs:  
Dataset = #dynamicDataset  
Text box A that varies = #text29  
Text box B that should hide when A is empty = #group1

The code:

$w(“#dynamicDataset”).onReady(() =\> {  
var item = $w(“#dynamicDataset”).getCurrentItem();  
if (item[“#text29”] === undefined) $w(“#group1”).hide();  
**else** $w(“#group1”).show() ;  
});

The error I get should be attached. Reminder, this is the only code on that dynamic page, which might explain the error.

 ![](https://us1.discourse-cdn.com/wix/original/3X/d/6/d6019da554bd9fe2f648a89b7500a594347e1b06.jpeg)

---

<div class="post-metadata">

**Author:** ![contactborsalino](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contactborsalino/32/5491_2.png) [@contactborsalino](https://forum.wixstudio.com/u/contactborsalino)\
**Post date:** [July 25, 2018, 1:01pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/6 "2018-07-25T13:01:31Z")

</div>

I’ve rearranged the code by taking out (“#dynamicDataset”) on ligne 1.  
However, now #group1 hides on every page regardless of the what happens in #text29.

What is missing?

---

<div class="post-metadata">

**Author:** ![jeromechauveau](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jeromechauveau](https://forum.wixstudio.com/u/jeromechauveau)\
**Post date:** [July 25, 2018, 1:24pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/7 "2018-07-25T13:24:54Z")

</div>

Hi

1. The code must be within $w.onReady( **function** () {} (see below full extract from my code)

```javascript
$w.onReady(function () {
	 $w("#dataset1").onReady(() => {
		  var item = $w("#dataset1").getCurrentItem();
		  if (item["mail"] === undefined) $w("#text18").hide();
		  else $w("#text18").show() ;
  	 });
});

```

1. Is #text29 content based on a column in the dataset?

---

<div class="post-metadata">

**Author:** ![contactborsalino](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contactborsalino/32/5491_2.png) [@contactborsalino](https://forum.wixstudio.com/u/contactborsalino)\
**Post date:** [July 25, 2018, 2:43pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/8 "2018-07-25T14:43:59Z")

</div>

Yes #text29 content is based on a column in the dataset.

---

<div class="post-metadata">

**Author:** ![jeromechauveau](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jeromechauveau](https://forum.wixstudio.com/u/jeromechauveau)\
**Post date:** [July 25, 2018, 3:41pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/9 "2018-07-25T15:41:40Z")

</div>

And what is the name of that column in the Collection?

---

<div class="post-metadata">

**Author:** ![contactborsalino](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contactborsalino/32/5491_2.png) [@contactborsalino](https://forum.wixstudio.com/u/contactborsalino)\
**Post date:** [July 25, 2018, 4:10pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/10 "2018-07-25T16:10:05Z")

</div>

It’s called “Festivals”

---

<div class="post-metadata">

**Author:** ![marketing-1](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@marketing-1](https://forum.wixstudio.com/u/marketing-1)\
**Post date:** [December 27, 2018, 5:38pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/11 "2018-12-27T17:38:08Z")

</div>

has anyone found a working code exmaple that will hide/collapse an element if there is nothing in the dataset field box?

---

<div class="post-metadata">

**Author:** ![delphineruaro](https://avatars.discourse-cdn.com/v4/letter/d/cc9497/32.png) [@delphineruaro](https://forum.wixstudio.com/u/delphineruaro)\
**Post date:** [June 14, 2020, 1:48pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/12 "2020-06-14T13:48:54Z")

</div>

After 24 hours I finally worked out the answer to this!! There you go:

```javascript
import wixData from 'wix-data';
$w.onReady(function () {
    wixData.query("yourdatabase")
    .isNotEmpty("keyofthecolumnthatcanbeempty")
    .find()
    .then((results) => {
            $w("#yourrepeater").data = results.items;
        });
});

```

To find the key of the column, click on your database, then click on the name of the column, then “Properties”. You will find Field Key, that’s the one you need to use! 😄

---

<div class="post-metadata">

**Author:** ![mckenziebeeby](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mckenziebeeby/32/23637_2.png) [@mckenziebeeby](https://forum.wixstudio.com/u/mckenziebeeby)\
**Post date:** [September 23, 2020, 12:15am UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/13 "2020-09-23T00:15:26Z")

</div>

I am trying to do a similar thing, but with a button and a link. If the link in the dataset is empty I would like the button to hide. Currently, all the buttons in my code are hiding even though some of them have links. Would love for anyone to show me what I’m doing wrong here -

```javascript
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() ;
     });
});

```

PS - linkItemTwo is the column with the links for the buttons

---

<div class="post-metadata">

**Author:** ![julianogoulart](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/julianogoulart/32/16314_2.png) [@julianogoulart](https://forum.wixstudio.com/u/julianogoulart)\
**Post date:** [October 4, 2020, 4:35pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/14 "2020-10-04T16:35:03Z")

</div>

This last code worked like a charm for me!  
Just replace the item names, and it should work.

---

<div class="post-metadata">

**Author:** ![simonecarolynr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simonecarolynr/32/25119_2.png) [@simonecarolynr](https://forum.wixstudio.com/u/simonecarolynr)\
**Post date:** [December 18, 2020, 6:20pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/15 "2020-12-18T18:20:11Z")

</div>

This worked for me! I had a container with a repeater on my dynamic title page and here’s what I did:

```javascript
$w.onReady(function () {

    $w("#theDataSetImPullingFrom").onReady(() => {

            let item = $w("#theDataSetImPullingFrom").getCurrentItem();
            console.log(item)
            
            if(item === null)
                $w("#myContainer").hide();
            else
                $w("#myContainer").show()
                
    })

});

```

---

<div class="post-metadata">

**Author:** ![derek38500](https://avatars.discourse-cdn.com/v4/letter/d/53a042/32.png) [@derek38500](https://forum.wixstudio.com/u/derek38500)\
**Post date:** [August 8, 2022, 8:07pm UTC](https://forum.wixstudio.com/t/how-to-hide-elements-based-off-other-empty-elements/6481/16 "2022-08-08T20:07:30Z")

</div>

Hello, I just posted this in reference to what you’re trying to do and it works!

[https://www.wix.com/velo/forum/main/comment/b5aa4075-3acf-4c40-b1c1-37d84f78e82c?postId=5a6f512d01669f0014939928](https://www.wix.com/velo/forum/main/comment/b5aa4075-3acf-4c40-b1c1-37d84f78e82c?postId=5a6f512d01669f0014939928)