Using maps in accordion views

Home Forums MapPress Support Using maps in accordion views

  • This topic has 3 replies, 1 voice, and was last updated 1 year ago by Chris.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18917
    solari
    Participant

    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

    #18920
    Chris
    Keymaster

    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/

    #18921
    solari
    Participant

    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

    #18923
    Chris
    Keymaster

    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.

    #18930
    solari
    Participant

    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

    #18931
    Chris
    Keymaster

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.