How to expand a page element with a click on a header element

Ask the community
,
1

I have an element in a header. I need to expand other element on a main page when the header element is clicked. The header element only allows code in masterPage.js, so I put an onClick() action there which saves ‘open’ value in a wix storage when the element is clicked:

import { memory } from 'wix-storage';

export async function vectorImage11_click(event) {
    memory.setItem("filterOpen", 'open'); 
}

Then I added to a main page code the part that retrieves the value from a wix storage and expands the element. When I trigger it manually with some other button on a main page it expands the element. How can I make it work itself once the header element has been clicked and “filterOpen” parameter value has changed? I gues I need to use some sort of function, but my knowledge is pretty poor so far.

  import { memory } from 'wix-storage';
  
  let filterState = memory.getItem("filterOpen");
    if (filterState == 'open') {
        $w('#filterStrip').expand();
    }
2

I’m not following what you need. Do you need to expand something on the header? Is that it?

3

I need to expand a page element with a click on a header element, but don’t know how to connect them as their code are in different js files.

I assume there is another (non-storage) solution that I miss, so any piece of advice is appreciated.

4

@epglazunov
Create a public js-file and you do not need any storage-functions anymore.

A public JS-FILE can connect your page with the header, or footer.

5

@russian-dima
Thank you, it really sounds much more valid than my ‘storage’ solution. Thanks again for your help!

6

@epglazunov if you have only one dynamic page, the code can be put directly in the page, even if the element is on the header.

If you have many pages that have the same button behavior, you could copy de code over the pages that will have the elements.