custom collapsible mobile filter menu - need some javascript help

[Nzagamba]

I'm trying to make a custom collapsible filter menu for my drawing archive.

Here's my page, what I managed to do up to now:
https://tobiasgutmann.com/artworks/

In the mobile version, there are two things, that I couldn't figure out how to fix:

1. I would like the green button to dissapear, as soon as you click on it, so only the filters appear.
2. If clicking on an image while filters are showing, it automatically opens it in lightbox, instead of closing the filter first. I would like, whenever you click outside of the filters, the filters close again to see the overview of the archive, and then the lightbox is active again.

Is there anyone out there who could help me with this?
Best,
Tobias

[arminunruh]

so
when the filter is open, the green button should disappear

when the filter is open, clicking anywhere except one of the filters, the filters should disappear and green button should appear

only when filters are closed, the images are clickable to view the lightbox

and desktop version should stay the way it is

correct?

[Nzagamba]

@arminunruh Thanks for your reply.

when the filter is open, the green button should disappear

Yes, exactly, to give all the space needed for the filters

when the filter is open, clicking anywhere except one of the filters, the filters should disappear and green button should appear

Yes, this whas what I had in mind. Alternative could be:
when the filter is open, clicking anywhere, the filters should disappear and green button should appear. clicking on one of the filters, both scrolls to the area and also closes filters.

Not sure yet, if this step is confusing from a UI Perspective, or if filters should stay visible, until one them away.

only when filters are closed, the images are clickable to view the lightbox

Yes

desktop version should stay the way it is

Yes

[arminunruh]

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

i think this custom code only should take me 10 minutes to do, i will do it for free! :D

[Nzagamba]

Armin, you would be my hero, if you could help me out with this one! I've sent you the details per email a while ago. did you receive it?

[Nzagamba]

Update: Thanks to ChatGPT I managed to fix some parts of the missing pieces of my menu. current site on mobile looks like this.

What I still struggle with and am looking for a solution:

1. Filter menu does not work when visiting the site for the first time, navigating through the main menu. only after reloading the page, the filter menu works. Any solution?

2. When clicking outside of the filter buttons, on an image, instead of closing the filter, the lightbox zooms the image directly. I would like the menu to close, before lightbox is active again.

Some help from an expert would mean the world to me!

[arminunruh]

Hey, I couldn't manage to do it because I got sick.

Point two, what you could do is create an extra div. This div is transparent and lays over the images but under your buttons. Then bind the click on this div to close your menu.

Point one, maybe you need to bind the click like this.
https://laytheme.com/documentation/custom-javascript.html#binding-click-events

So basically you use a delegated event handler to bind to document.