H5P not working on multiple tabs on a page

  • Resolved spedigi

    (@spedigi)


    7 years, 11 months ago

    Hi, we just started using H5P, and we got into a snag. We are using tabs on the pages, H5P works on the first tab and on the tab2, tab3 H5P doesn’t work.
    Here’s what the code looks like, please let us know if there is a limitation for H5P or we are not using it correctly.
    —-
    [accordions collapsible=false active=true style=accordion-container]
    [accordion title=”Accordion title 1″ style=””]
    If I put h5p content here, it works:
    [h5p id=”1″]
    [tabs collapsible=”true” selected=”0″ event=”click” position=”top” ]

    [tab title=”Tab 1″]
    If I put h5p content within the first tab, it still loads properly:
    [h5p id=”1″]
    [/tab]

    [tab title=”Tab 2″]
    If I put h5p content in later tabs, it does not load:
    [h5p id=”1″]
    [/tab]

    [tab title=”Tab 3″]
    If I put h5p content in later tabs, it does not load:
    [h5p id=”1″]
    [/tab]
    [/tabs][/accordion]
    [accordions collapsible=false active=true style=accordion-container]
    [accordion title=”Accordion title 2″ style=””]
    Accordion 2 content
    [/accordion][/accordions]
    —-
    Thank you.

Viewing 1 replies (of 1 total)
  • Plugin Author icc0rz

    (@icc0rz)

    Currently, H5P content cannot be inserted into a hidden container, i.e. a closed tab, it needs to be visible in order to determine its own size relative to its parent container.
    Hopefully, in a not to distant future, we’ll be able to change this so that it determines its size when it becomes visible. However, it might still be problematic to use inside some accordion plugins since an accordion usually needs to know the size of its content. (The hen and the egg problem)

    If you can make the Accordion trigger a window resize event when the tab is opened that might solve the issue!

Viewing 1 replies (of 1 total)
  • The topic ‘H5P not working on multiple tabs on a page’ is closed to new replies.