Using maps in accordion views

[solari]

Greets,

I’d like to use maps inside accordion blocks where you click a link and the map unfolds open. The issue so far with this using different accordion blocks is only a tiny corner of the map shows up when unveiled. I’m guessing it has to do with it not being able to render while closed. Is there some sort of work around for this?

Thanks!

Ray

[Chris]

Hi,

You’re right about the cause (hidden elements have no size). There’s unfortunately no general workaround, because all accordions, tabs, etc. work differently and have different events. But there’s an example here that can be tailored to your specific case:

https://mappresspro.com/mappress-faq/

[solari]

I can confirm the accordion block (Accordion Blocks by Buchanan) uses JQuery but I’m a little lost as to where I would put the code you pointed me in the FAQ. Where would I pop it in?

Thanks for your patience and help!

Ray

[Chris]

Here’s a guide for how to include JavaScript:
https://developer.wordpress.org/themes/basics/including-css-javascript/

That script won’t work as-is, it’s an example for jQuery tabs and other controls usually have different event names for when they open. I checked the accordion documentation, but I didn’t see any events listed. If you’d like to send a URL with a map & accordion on it I’ll have a quick look and see if I can guess.

[solari]

Chris,

Bad news: It was still over my head : /

Good news: I played around with a few accordion blocks and found that Kadence’s version handles folded up maps properly without any coding needed, yay!

Here’s what it looks — click the map link below the photo: Link

Passing on in case others need to know.

Ray

[Chris]

Hi,

Glad you got it working. Looks like that accordion briefly shows the accordion panel (and map) before hiding it, so the map can get its size.

If you find it’s not working as expected, please try the jQuery accordion – it’s built into WP and I can help you define the code for it.

[Author]

Posts