Map doesn't display properly within an Accordian

G’day erh,

Adapted from the FAQ for jQuery UI tabs, try this code snippet where you have accordions:

<script>
jQuery(function($) {

$("body").on("activate", function(event, ui) {
    $("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
});

});
</script>

cheers,
Ross

Brilliant! Thanks for the quick response!

But, I’m going to have to ask for just a bit more help… what exactly shall I do with the code snippet you provided?

(I apologize, I’m still new to all this)

EDIT: I tried copy and pasting the code directly on to the test page before, after, and within the accordion, but still had no luck getting it to work

OK, I looked more closely at your test page, and the first accordion isn’t a jQuery UI accordion, it’s a custom script that doesn’t trigger any events. Toss it, it’ll only cause you pain.

The second accordion uses jQuery UI, which gives us an event we can catch. I’ve revised that code above and added to a simple plugin. Download the .php file from this gist, and install / activate to fix your problem:

https://gist.github.com/webaware/05b27e3a99ccb00200f5

NB: the marker title is still a bit screwy, but you can hide the title with showinfo=false and it will appear correctly when someone clicks on the marker.

cheers,
Ross

So, that totally worked for the accordion. Thanks a tun. But I’m afraid it gets a bit more complicated ??

Here’s the catch, the place where I intended to use the flexiblemap was already within an accordion. Which is to say, I needed an “accordion effect” within an accordion — which is why I was using the second “accordion” plugin (Collapse-O-Matic with the “Expand” shortcode) — which apparently doesn’t cause an ‘event’ that can cause the flexiblemap to resize.

I tried an accordion within an accordion, but the innermost accordion just terminates the outer accordion, so that won’t work.

The plugin has another option called a ‘toggle’ (which is just a single accordion item, not within a set of others) — but alas, the event name must not be the same because the map still didn’t show up correctly within the toggle ??

I tried (on a whim) updating the PHP you provided as follows, but it still didn’t cause for the “toggle” to properly display the map.

<script>
jQuery("body").on("toggleactivate", function(event, ui) {
    if (ui.newPanel.length) {
        jQuery("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
            var flxmap = window[this.getAttribute("data-flxmap")];
            flxmap.redrawOnce();
        });
    }
});

</script>

The broken example can still be seen here:
https://www.saultimate.org/test/

I feel you’ve already gone above and beyond to help me, with the creating of the new PHP Plugin and the quick responses. I am sheepishly crawling back to beg you for additional advice from someone far more talented than I. Any help is greatly appreciated.

I just tried this in a test environment with Squelch Tabs and Accordions Shortcodes, had no problem:

[toggles]
[toggle title="Toggle"]
Some text goes here
Some text goes here
Some text goes here
Some text goes here
[accordions title=""]
[accordion title="View Map"]
[flexiblemap center="29.578838,-98.467129" title="Bradley Middle School" width="100%" showinfo=false]
[/accordion]
[/accordions]
[/toggle]
[/toggles]

Make sure you’re using version 2 of Flxmap jQuery UI Activate, I made some changes to that plugin just after I last posted here, so that it could accommodate both accordions and tabs.

cheers,
Ross

Almost there! Its working when the Accordion is inside the toggle. But not when the Toggle is inside the Accordion (which is the one I need).

Test page has been updated:
https://www.saultimate.org/test/

What are the chances a v3 of this fix can be put together?

Again (and either way), truly, I appreciate your work on this. You’ve already gone well above and beyond the support I was expecting for this plugin.

G’day erh,

That’s probably going to need something custom for your website. I might be able to craft something generic, but it’s not going to happen this week because I’m very busy. Perhaps you can find a JavaScript programmer who can look at the solution I gave you, and write something site-specific for you.

cheers,
Ross