# How to hide a container box on dynamic item page.

**URL:** <https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [July 31, 2018, 8:25am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106 "2018-07-31T08:25:44Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [July 31, 2018, 8:25am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/1 "2018-07-31T08:25:44Z")

</div>

hey everyone, i have create dynamic item page which is containing 4 container box item, i want each dynamic page of my database collection to filter my database and show only required number of container box(example-page 1 will carry only 2 box, page 2 will carry 4, page 3 will carry 1,etc). But my dynamic pages are showing all the 4 box at a time. can anyone explain me how to hide those unwanted boxes from my dynamic item page on preview.

---

<div class="post-metadata">

**Author:** ![mqumseya](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mqumseya/32/3999_2.png) [@mqumseya](https://forum.wixstudio.com/u/mqumseya)\
**Post date:** [July 31, 2018, 4:27pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/2 "2018-07-31T16:27:46Z")

</div>

Hello Wasim,

To do that you would have to query the dataset specific to the dynamic page, get the relevant information regarding what you want to filter, and create a condition statement based off of the information you got from the dataset that hides and shows each container.

Get current item that the dynamic page is on -

> **[wix-dataset - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/wix-dataset)**
>
> A dataset connects page elements to a set of items in a data collection.

```javascript
 let itemObj = $w("#myDataset").getCurrentItem(); // get the current item

if(itemObj.gender === 'male') { //condition
    $w('#maleContainer').show(); //show/hide containers based off of condition 
} else {
     $w('#femaleContainer').show();
}

```

---

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [August 1, 2018, 7:33am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/3 "2018-08-01T07:33:11Z")

</div>

Hey Majid,  
What is this maleContainer and femaleContainer ?

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [August 1, 2018, 8:09am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/4 "2018-08-01T08:09:50Z")

</div>

Hi Wasim:

I think Majid was giving you a generic example on how to show or hide an element in code based on a condition.

Let me try a different proposal.

I think if you look at the repeater ([https://www.wix.com/code/reference/$w.Repeater.html](https://www.wix.com/code/reference/$w.Repeater.html)) you will see that you can modify the repeater contents by setting the [data](https://www.wix.com/code/reference/$w.Repeater.html#data) set that the repeater uses.

So if you choose the repeater you want to use from “Lists and Grids”

 ![](https://us1.discourse-cdn.com/wix/original/3X/8/9/893f4ef84c273c89f9ba31fa4e7f6162335f15bc.png)  
Then what you can do is load the data for the page from your data collection using the filter you refer to and assign the array of results to this field of the repeater.

Another way to do this is to connect the repeater to a dataset…

> **[Working with the Connect Repeater Panel | Help Center | Wix.com](https://support.wix.com/en/article/working-with-the-connect-repeater-panel)**
>
> You can connect a repeater to a dataset to display information from your collection. Once connected, your repeater element will automatically have one repeater

Check out these docs for more information and other ways to use the repeater:

> **[CMS (Formerly Content Manager): About Displaying Collection Content in a...](https://support.wix.com/en/article/cms-formerly-content-manager-about-displaying-collection-content-in-a-repeater)**
>
> A repeater is an element that displays multiple items using the same layout. You create the layout you like, and then each repeater item uses that same layout t

> **[CMS: About Connecting Page Elements to Collection Content | Help Center |...](https://support.wix.com/en/article/cms-about-connecting-page-elements-to-collection-content)**
>
> Connecting content is the process of connecting your page elements to a collection. This allows you to:
> Display the contents of a collection on your site page

Hope this helps  
Steve

---

<div class="post-metadata">

**Author:** ![mqumseya](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mqumseya/32/3999_2.png) [@mqumseya](https://forum.wixstudio.com/u/mqumseya)\
**Post date:** [August 1, 2018, 12:28pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/5 "2018-08-01T12:28:45Z")

</div>

Thanks for the clarifications Steve :)!

---

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [August 1, 2018, 12:32pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/6 "2018-08-01T12:32:40Z")

</div>

hey Majid, can please explain me about the maleContainer and femaleContainer. if(itemObj.gender === ‘male’) this too

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [August 1, 2018, 4:02pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/7 "2018-08-01T16:02:51Z")

</div>

Hi Wasim:  
Not wanting to speak for Majd but let me see if I can solve your dilemma.  
I think Majd was creating a hypothetical example where you have two boxes. One called $w(‘#maleContainer’) and one called $w(‘#femaleContainer’); You show the $w(‘#maleContainer’) if the value of the itemObj property **gender** has the value ‘male’.

```javascript
if (itemObj.gender === 'male') { 
    //condition 
    $w('#maleContainer').show(); 

```

Since the other gender possibility in this example is ‘female’. If the property gender does not have the value ‘male’ then the else condition is triggered and the $w(‘#femaleContainer’) is shown instead.

```javascript
} else {
    $w('#femaleContainer').show();
}

```

Because you didn’t give any information about the names of the boxes on your dynamic pages Majd made something up.

His example could have used more generic names like  
$w(‘#box1’) and $w(‘#box2’) so the code for your example could also be written like this

```javascript
 let itemObj = $w("#myDataset").getCurrentItem(); // get the current item
 // Hide all boxes
 $w('#box1').hide();
 $w('#box2').hide();
 $w('#box3').hide();
 $w('#box4').hide();
 // Only show the boxes we have data for
 if(itemObj.box1Value !== null) {
      $w('#box1').show();
 } 
 if(itemObj.box2Value !== null) {
      $w('#box2').show();
 }
 if(itemObj.box3Value !== null) {
      $w('#box3').show(); 
 }
 if(itemObj.box4Value !== null) {
      $w('#box4').show(); 
 }

```

Hope this makes sense to you now.

---

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [August 1, 2018, 4:07pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/8 "2018-08-01T16:07:02Z")

</div>

Yeah completely…thank you so very much stcroppe.

---

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [August 1, 2018, 4:26pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/9 "2018-08-01T16:26:25Z")

</div>

Hello stcroppe, i have tried your given code but it did not work.

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [August 1, 2018, 10:27pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/10 "2018-08-01T22:27:28Z")

</div>

Hi Wasim:

In what context?

if you just cut and paste what I wrote then i’m not sure how it would.

You need to share what you have done or a page link for forum members to look at. At the moment all we are doing is proposing ideas. its up to you to read the documentation and design your application.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [August 2, 2018, 5:01am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/11 "2018-08-02T05:01:11Z")

</div>

I have changed the dataset name according to my page. And my boxes name are same as your example code box1, box2,box3…etc.

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [August 2, 2018, 6:27am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/12 "2018-08-02T06:27:07Z")

</div>

Wasim:

Is your page published? The code I provided above is a snippet for you to think about and make appropriate changes to your page.

If you paste the complete code for your page here, it will be easier to help you. Otherwise we are all guessing.

Also check out this documentation:

- [Velo Tutorial: Hiding an Element on Certain Pages | Help Center | Wix.com](https://support.wix.com/en/article/how-to-hide-an-element-on-certain-pages)

- [CMS (Formerly Content Manager): About Displaying Collection Content in a Repeater | Help Center | Wix.com](https://support.wix.com/en/article/displaying-dynamic-data-in-a-repeater)

Thanks

---

<div class="post-metadata">

**Author:** ![hamidrazawasim](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/hamidrazawasim/32/5556_2.png) [@hamidrazawasim](https://forum.wixstudio.com/u/hamidrazawasim)\
**Post date:** [August 2, 2018, 7:02am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/13 "2018-08-02T07:02:01Z")

</div>

Hello stcroppe;  
I have attached the screenshot of my page, I am not sure where i am making the mistake.

 ![](https://us1.discourse-cdn.com/wix/original/3X/8/b/8b5d2cb2a2a538d5e68321bf2418610bc4895810.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/2/2/22bce55b1cffe54ff919932e8b3f3be22e65e9f3.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/2/4/24f8704ef91c4f9fe752a2bbeee1a155170630dc.png)

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [August 2, 2018, 9:07am UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/14 "2018-08-02T09:07:22Z")

</div>

Hi Wasim:

OK you need to get familiar with how to access page elements and write code in Wix.

If you take a look at these pages this will get you started.

> **[Velo: Working in the Code Panel | Help Center | Wix.com](https://support.wix.com/en/article/velo-working-in-the-code-panel)**
>
> Visit the Velo by Wix website to onboard and continue learning.
> You edit the code for your site in the code panel, which is displayed at the bottom of the Edito

> **[Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page...](https://support.wix.com/en/article/velo-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code)**
>
> Visit the Velo by Wix website to onboard and continue learning.When you want to add previous and next buttons to a dynamic page, you may be tempted to add two b

In the document pointed to by the second link you will see how you need to wait for the important elements of your page to be ready for you to work with them using the onReady Function for the page - $w.onReady() and the TypeOfService data set that you are depending on for displaying content $w(‘#’).onReady(). It also shows how to import Wix helper apis that are documented here: [Velo API Reference - Wix.com](https://www.wix.com/code/reference/)

Then you need to possibly use a few [console.log()](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) Statements to display key data that you are dependent upon that you can use for debugging purposes. When you select preview the console at the bottom of the page will display the output from these console.log calls so you can see the data your code is seeing.

While looking at the links I have provided above, you will likely see other documents that might also expand your understanding and example code.

Hope this helps

---

<div class="post-metadata">

**Author:** ![creatorenterprise](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@creatorenterprise](https://forum.wixstudio.com/u/creatorenterprise)\
**Post date:** [October 6, 2020, 2:41pm UTC](https://forum.wixstudio.com/t/how-to-hide-a-container-box-on-dynamic-item-page/5106/15 "2020-10-06T14:41:01Z")

</div>

This was very useful, thank you so muchhhh