Expand/collapse master section based on boolean value in Collection

Ask the community
1

I’d like a master header section to expand or collapse based on the boolean value in a Collection. It sounds so simple but I have tried and searched and haven’t figured out the code.

2

Hi @wcavatio,

Can you please share a bit more about what you are trying to achieve? Maybe an example?

Thanks,
Carmel

3

I have a master section that will be used as an “alert bar” at the top of the page(s). I’d like to be able to collapse it or expand it from the boolean value in a Collection so I can control it from an “admin page” and not have to go into the Editor to expand or collapse it. Does that make sense?

4

With the caveat that I’m a Velo beginner, here’s code that I am using to expand a section based on a condition. Maybe it will help.

photoSection1 is a section on the page that is set to ‘collapsed’. It contains an image element connected to the collection field image1 .

image1 is a field in the collection that may or may not contain an image.

This code uses the page’s dataset to get the current collection item and checks whether there is content in the field image1 . If that field contains an image, the section in which it’s displayed ( photoSection1 ) will be expanded. If not, it remains collapsed.

It might be clearer if I had a separate boolean field (e.g. image1Exists ), but the presence / absence of the image is interpreted correctly as a boolean.

$w . onReady ( function () {
$w ( ‘#dynamicDataset’ ). onReady (()=>{

    **if**  ( $w ( '#dynamicDataset' ). getCurrentItem (). image1  ) {

$w ( “#photoSection1” ). expand () } ;

// a lot of additional code you don’t need
})
})

5

Thanks Jim. The difference seems to be that a master section can’t use datasets, unless I’m missing something. I have done things similar to what you shared when it is an element on a page, not in a master section.

6

ah, ok.

Have you posted this question on the Velo forum? There might be more expertise there: https://www.wix.com/velo/forum/coding-with-velo

7

Hey @wcavataio ,
I understand you want to control the appearance of a master section from the content manager, this can be done using some velo code here is a video describing the process:

https://www.screencast.com/t/x2EZEr8vVMa ,

here is the code that I used, remember you need to add this code in each one of your pages, and change the query according to the page your on:

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
wixData . query ( “siteControl” )
. eq ( “page” , “home” )
. find ()
. then (( results ) => {
if ( results . items . length > 0 ) {
let firstItem = results . items [ 0 ];
console . log ( firstItem . showMaster );
if ( firstItem . showMaster ) {
$w ( ‘#section4’ ). expand ();
}
} else {
// handle case where no matching items found
}
})
. catch (( err ) => {
let errorMsg = err ;
});
});

hope this helps!

8

Thank you so much for taking the time to show how to do that! It works! I actually wanted the code to be site wide, not page specific, so I tried putting the code on masterPage.js and that seems to be working as well!

9

@wcavataio Cool, glad it worked for you. BTW, theoretically if you wanted you could put the code in masterPage.js and still make it page specific, there is an api in velo called wix-location that can get you the current url of the page that you are on and then you could use the query in the masterPage based on that.