There are plenty of plugins for WordPress that allow you to add tabbed pages, accordions, lightboxes or other goodies to your site. We’ll speak of those a couple of times within this post, so let’s simply call them tabcordabox if we mean this general category.
The details of tabcordaboxes vary, but the principle is always the same: One element is displayed, the others are hidden, and upon some action one of the hidden items will be displayed while the previously shown will be hidden. If you think about tabs, the elements are some contents, the action is clicking on a tab.
If your elements are H5P contents, it’s very likely that the first one will be shown, but not the others, even when they actually should. Why is that? There’s a short (technical) descriptionon h5p.org, but you will find some more in-depth information here.
H5P content is a little special, because it is served in an iframe. The iframe’s size is computed the first time when H5P content gets started. That will work fine if the H5P content is the visible one. For the others, the hidden ones, H5P will have nothing but a height of 0 pixels. H5P does not know that you click on some tabcordabox‘s button in order to display other content. So H5P doesn’t know that it should resize the iframe – and it will simply keep the height of 0 pixels.
But I have seen that iframe thingy resize!
There are a couple of things that will cause the iframe to resize. First, that happens when the content’s height inside the iframe changes and the content type tells the core of H5P that the iframe should be resized. Second, when the browser window’s size changes – in width in particular – H5P core registers this, resizes the iframe and also tells the content inside the iframe to resize. The latter is what what we need, but H5P core does not know about any tabcordabox.
You can easily check whether your site’s problem is covered by the scenario that is described above:
- open your page – the first H5P content is shown,
- activate another element – the other H5P content does not show, and then, for instance,
- resize the browser window.
The other H5P content should now appear, because H5P core was triggered by the browser size change and recomputed the height of the iframe.
And that’s the solution?
No. And yes.
On the one hand, H5P could include extra individual code for each of the other tabcordaboxes, so it could listen to the click events. Madness.
On the other hand, the other plugins could add one command to simulate a browser resize that H5P would recognize.
window.requestAnimationFrame(() => { window.dispatchEvent(new Event('resize')); });
That solution is not specific to H5P, but still: what if there are other contents that suffer from a similar problem but need a different approach? Then the tabcordaboxes would also need to add extra code for those. Madness.
A workaround
One could write an extra plugin that tries to glue the tabcordaboxes and H5P together. One of those is SNORDIAN’s Resize Pulse, but it is merely a workaround.
By default, the plugin triggers the aforementioned window resize simulation in regular intervals. That will in turn trigger H5P to resize once or maybe twice a second depending on the settings. However, because that resizing will happen continuously, even when no resize is needed, this may cause performance issues on devices with little resources. Also, some content types will not work. For example, Find the Words rebuilds its letter grid every time the content type gets a signal to resize (unnecessarily, but that’s a different story). That will break the ability to draw lines.
There’s also a “selector” mode that you can use. You will need to determine (a) specific CSS selector(s) for the elements that trigger changing content, e.g. for the buttons of a tab plugin. Given that selector, the resize pulse will only be fired when the respective element is clicked. That way, the side effects of the “interval” mode can be prevented. However, it may not be possible to determine a CSS selector, or the other plugin may require some other trigger than a click.
Please note that if you use that plugin, it is kindly asked to donate at least 2.50 EUR to the Rainforest Coalition.
An alternative maybe
If you are using tabs, then there might be an alternative. The styling options are limited, but you can create tabs in a dedicated H5P content type. Guess its name: Tabs!
When this post was released, it was not yet available on the H5P Hub, but you can install it by downloading the demo content below and then by uploading it to your site with admin rights.