Reload H5P after changing display from none to block

Dear H5P experts,

on a webpage I'm wrapping a H5P inside a <div>. The <div> has style="display:none". I.e. when the page loads, the <div> (and thus the contained H5P) is not displayed. So far, so good.

Now, on the webpage I have a button, which (when clicked) changes the style of the surrounding <div> to style="display:block". I.e. clicking the button makes the <div> visible.

The issue is, that when the <div> becomes visible, the H5P inside the div is still *not* visible. This is strange and not the behaviour I desire. I'd like the H5P to also become visible when the surrounding <div> becomes visible.

However, when I then resize my browser, the H5P suddenly becomes visible! From this behaviour I'd guess, that the H5P on the webpage must be somehow "refreshed"/"reloaded".

My question is: How can I make the H5P visible, when the surrounding <div> becomes visible? Is there a way to "refresh"/"reload" it using JavaScript?

Many thanks in advance for your help!

Best regards

Alexander Voigt

 

Content types: 
otacke's picture

Hi Alexander!

This is not really strange, and there's even a page dedicated to this issue. Please see https://h5p.org/manipulating-h5p-with-javascript

Best,

Oliver 

Dear Oliver,

many thanks for directing me to this site!

I've solved the issue using the hints on the site. For the record, I've added the following command to the function that is run when the button is pressed:

window.dispatchEvent(new Event('resize'));

Many thanks again and best regards,

Alex

otacke's picture

Hi Alex!

You're welcome.

Greetings from Hamburg,

Oliver