Dynamic Content in v2 Tabs

[justinmking]

Hi there!

I’m working on a page that makes use of the v2 tabs element. Some of the content I’m loading into this element doesn’t load properly if it’s on the tabs that are hidden when the page loads.

Is there any way to set the tabs to load dynamic content when they’re clicked on? I did try the display:none; trick found elsewhere on these support forums, but that didn’t work.

[rad]

Hi Justin,

Thanks for reaching out.

I assume you’r referring to rendering of the audio player. It happens on any element that requires dimension during the rendering process, like grids and slider. And a hidden tab is without a dimension which is why it works if you quickly click the tab while it still loading and not yet rendered.

The solution would be re-triggering the rendering upon tab clicking, please add this to Theme Options > JS

jQuery( function($) {
$( '.x-tabs-list button' ).on('click', function() {
setTimeout ( function() {
$(window).resize();
console.log('resized');
}, 1000);
} );
} );

The 1000 is equivalent to 1 second delay, you may change it according to your delay preference.

Thanks!