# How to Collapse Sections on Dynamic Pages

**URL:** <https://forum.wixstudio.com/t/how-to-collapse-sections-on-dynamic-pages/76523>\
**Category:** Ask the community\
**Tags:** code, question, cms, wix\
**Created:** [February 9, 2026, 8:09pm UTC](https://forum.wixstudio.com/t/how-to-collapse-sections-on-dynamic-pages/76523 "2026-02-09T20:09:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![austinmdiamond](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/austinmdiamond/32/84276_2.png) [@austinmdiamond](https://forum.wixstudio.com/u/austinmdiamond)\
**Post date:** [February 9, 2026, 8:09pm UTC](https://forum.wixstudio.com/t/how-to-collapse-sections-on-dynamic-pages/76523/1 "2026-02-09T20:09:32Z")

</div>

**I’m having trouble with**

Hi! I am creating dynamic pages based on age. So, for example, [test.com/kids](http://test.com/kids) and [test.com/adults](http://test.com/adults). I want to have only certain sections on the page visible to the appropriate age group. I know (or think) that the best way to do this is by using the True/False Boolean CMS method, but I can’t figure out how to actually write the code.

I would be very appreciate for your help.

Thank you!

Austin 🙂

**Working in**  
Wix Editor

---

<div class="post-metadata">

**Author:** ![noahlovell](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/noahlovell/32/118920_2.png) [@noahlovell](https://forum.wixstudio.com/u/noahlovell)\
**Post date:** [February 11, 2026, 3:09pm UTC](https://forum.wixstudio.com/t/how-to-collapse-sections-on-dynamic-pages/76523/2 "2026-02-11T15:09:25Z")

</div>

Sounds similar to the use case described in this topic:

> [@Is there a way of making specific sections appear on dynamic pages?](https://forum.wixstudio.com/t/is-there-a-way-of-making-specific-sections-appear-on-dynamic-pages/76072/2):
>
> Sounds possible. Similar to the linked post, you’ll want to: Add a boolean field to your CMS. Something like showStatic Then use code similar to: Whereby, you’ll update the ids of the elements for your use case. When the boolean is true, the static content will show and dynamic collapse, and the opposite for false

---

<div class="post-metadata">

**Author:** ![austinmdiamond](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/austinmdiamond/32/84276_2.png) [@austinmdiamond](https://forum.wixstudio.com/u/austinmdiamond)\
**Post date:** [February 11, 2026, 7:27pm UTC](https://forum.wixstudio.com/t/how-to-collapse-sections-on-dynamic-pages/76523/3 "2026-02-11T19:27:42Z")

</div>

$w(‘#dynamicDataset’).onReady(() =\> {  
const item = $w(‘#dynamicDataset’).getCurrentItem()  
if (item.showStatic) {  
$w(‘#staticContent’).expand()  
$w(‘#dynamicContent’).collapse()  
}  
})

Thanks Noah! I’m not sure what I should be putting to replace each element. How do I find the name of what should replace “#dynamicDataset”? And if there are many sections on each page to show or hide (for example, 7 different sections), how do I implement the code for all those different things?

Also, where does this code get placed in the whole grand scheme of the code on the page?

---

<div class="post-metadata">

**Author:** ![austinmdiamond](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/austinmdiamond/32/84276_2.png) [@austinmdiamond](https://forum.wixstudio.com/u/austinmdiamond)\
**Post date:** [February 13, 2026, 3:29am UTC](https://forum.wixstudio.com/t/how-to-collapse-sections-on-dynamic-pages/76523/4 "2026-02-13T03:29:55Z")

</div>

**SOLUTION:**

So, I hope this is useful to others. I had successfully implemented this on a previous site but forgotten, and I went back and found it. Hope this helps! 🙂

**First, I created dynamic pages.** I made a Sand item, Leaf item, Water item, and Fire item. Using one of the items to construct the whole structure, I put a section with a Designed\>Basic\>sand background image, another section with a leaf background image, another section with a water background image, and another section with a fire background image.

**Then, I opened up Dev mode, renamed each section as “sandsection,” “leafsection,” etc, and marked each section as hidden and collapsed.**

**Then, I opened up the CMS, and created Boolean fields called “sandsection,” “leafsection,” etc.**

**Then, I put in this code:**

$w.onReady( **function** () {

$w(“#dynamicDataset”).onReady(() =\> {

**let** project = $w(“#dynamicDataset”).getCurrentItem();

**if** (project.firesection=== **true** ){

$w(“#firesection”).show();

$w(“#firesection”).expand();

} **else** {

$w(“#firesection”).hide();

$w(“#firesection”).collapse();

}

**if** (project.watersection=== **true** ){

$w(“#watersection”).show();

$w(“#watersection”).expand();

} **else** {

$w(“#watersection”).hide();

$w(“#watersection”).collapse();

}

**if** (project.leafsection=== **true** ){

$w(“#leafsection”).show();

$w(“#leafsection”).expand();

} **else** {

$w(“#leafsection”).hide();

$w(“#leafsection”).collapse();

}

**if** (project.sandsection=== **true** ){

$w(“#sandsection”).show();

$w(“#sandsection”).expand();

} **else** {

$w(“#sandsection”).hide();

$w(“#sandsection”).collapse();

}

});

});

**Finally, I went back into the CMS and checked “firesection” Boolean as true for Fire item, “sandsection” Boolean as true for Sand item, etc!**

**Hope this helps. 🙂**