Pasting shortcode (The Grid) inside an accordion tab

[DanielExMachina]

Hi there, I used The Grid plugin to create a small gallery of videos with a custom skin, and now I want that gallery to appear within a tab of an Accordion element when it’s twirled down.

When I grab the shortcode for this gallery from The Grid and paste it in the HTML Content section of the Accordion tab using Cornerstone, the formatting is all jumbled:

Here’s the page URL: https://glyphvideography.com/videos/

My galleries display correctly when I post them in regular row elements, such as in the “Featured” section of that page:

Any idea how I can get my galleries to display correctly within accordions?

[friech]

Hi @one_eyed_man,

Thank you for writing in, please keep in mind however that it’s generally not recommended to add Javascript displayed content like the Grid inside another Javascript powered interface like Tabs and Accordions as the timing might not match leaving you with empty content.

But with that said, you can follow the same guide provided here.

Please keep in mind though that code only serves as a guide, it would be ultimately your responsibility to take it from here as we don’t provide customization support in the forum.

Cheers,

[DanielExMachina]

Understood. I’d like to try implementing the code that was suggested in the post you linked to:

jQuery(function($) {
  $(".x-acc-header").click(function() {
    setTimeout(function() {
      $(window).trigger('resize');
  	}, 1000);
  });
});

Where should I paste this code?

[friech]

Hi @one_eyed_man,

You can paste it on the Page > JS area.

Cheers,

[DanielExMachina]

That code instantly fixed the formatting issue! I just changed the 1000 to 150 and now the timing is exactly to my liking as well. Thanks so much for the help!

[tristup]

Hi @one_eyed_man,

Glad that we are able to help you.

Thanks