How to Collapse Sections on Dynamic Pages

Ask the community
, , ,
1

I’m having trouble with

Hi! I am creating dynamic pages based on age. So, for example, test.com/kids and 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 :slight_smile:

Working in
Wix Editor

2

Sounds similar to the use case described in this topic:

3

$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?

4

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! :slight_smile:

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. :slight_smile:

5

If you’re using the Boolean field, your code would look something like this inside the onReady:-

JavaScript

$w(‘#dynamicDataset’).onReady(() => {
const item = $w(‘#dynamicDataset’).getCurrentItem();
if (item.booleanFieldKey) { // Replace with your field key
$w(‘#sectionId’).expand();
} else {
$w(‘#sectionId’).collapse();
}
});
This is much more reliable than checking for ‘null’ or ‘undefined’ text fields!

1 Like