custom collapsible mobile filter menu - need some javascript help
-
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:
- I would like the green button to dissapear, as soon as you click on it, so only the filters appear.
- 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 -
so
when the filter is open, the green button should disappearwhen 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?
-
@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
-
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
1/4
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it