Shortcodes not displaying when 2 or more present on a single page

Hello there!

Inserting multiple H5Ps using shortcode shouldn't be an issue on the theme you're using. I'm guessing it's the accordion you're using that's causing the issue. When the rest of the H5Ps are loaded they're not visible and therefore not able to determine their own size. They just lay there with no size. Can you try changing to an invisible H5P and then resizing your browser window to see if it appears?
If so, what needs to be done is triggering a resize event on the h5p content when the accordion changes views. What accordion plugin are you using?

Another way of achieving what you want might be to request an accordion content type for H5P, which I think would be a much more solid solution. However it wouldn't be as easy to re-use the content you create across pages.

Of course. When opening the page only the first element of the accordion is visible, the others are hidden. But even though they are hidden they are still loaded and initialized. The problem is that since they are hidden they get no size, and they don't know when they do. So if you jump to the next element in the accordion the H5P in that element is shown, but it's invisible since it has no size. What you have to do is to get the accordion to tell the H5P to resize when the accordion element opens. You can test this by opening an accordion element with a H5P that doesn't work, and then you can resize your browser window and the H5P will appear. This is because the browser tells the H5P to resize. What you want is the accordion to tell the H5P to resize. We can probably help you achieve this if we know the name of the accordion plugin you're using.

Ok, sorry I missed the name in the first post.

Since Visual Composer isn't open source it's a bit hard for me to tell how to make the accordion resize H5P. I would advice you to ask in the Visual Composer forum if there are any events you can listen for when the accordion changes elements. If there are I can help you create the code that triggers the resize.

Ok, I see. What we can try to do is add the following code at the end of this file: wp-content/themes/capture/js/imagesloaded.min.js:

jQuery(document).ready(function () {
  setTimeout(function () {
    jQuery('.ui-accordion').on('accordionactivate', function (event, ui) {
      ui.newPanel.css('height', 'auto');
      jQuery(window).trigger('resize');
    });
  }, 0);
});

Now when you update the theme this code will disappear, so ideally the code should be put in a separate file in a custom plugin where you keep all your little hacks. But I will not cover that now since there are numerous other tutorials on how to create you own custom plugin.

You might need to empty your browsers cache (Ctrl+Shift+Del) to get the new code running. Let me know if it works for you.

Are you still having issues with Firefox? You could try updating the line:

jQuery(window).trigger('resize');

to:

H5P.jQuery(window).trigger('resize');

and see if that works better.

I've tried to docment this "fix" here: http://h5p.org/node/2766

It seems like there might be some race conditions happening between the scripts in Firefox. You could try to increase the }, 0); to }, 1000); or something. Another way of solving this might be to move the script tag with the fix futher down on the page. Ideally I think the script should run after js_composer_front.js, So you could try inserting it just before the /body tag and see if that helps.

That is unfortunate. I'm guessing it's not easy to time everything in the correct order when using multiple plugins. Perhaps it would be easier if the resizing was done by the plugin starting the .accordion(). You could try to modify the visual composer scripts, but then you'll have to add the fix each time you update the plugin.

Beyond that I don't have any good suggestions. Perhaps the easiest solution is to just avoid using multiple H5Ps in the accordion.