Tabs doesn’t show content except for the first one

Support
#1

Hi,

I’ve added a VC shortcode (Post Masonry Grid) in some tabs in my website (is under construction) but the content is shown only in the first one.
If I try to switch tab the content doesn’t appear.

How can I fix this?

#2

Hi there,

You can not use the Javascript dependent elements inside tabs or accordions.

In general, there are elements that depend on Javascript calculation to determine their height. Such element will not show correctly in tabs or accordions that are hidden on the first load, as browser thinks that the height is 0.

That is why you do not see the Masonry element in tabs which are initially hidden. Now if you resize your browser you will see that Masonry grid will appear again as the resize of the browser window forces grid to recalculate the height.

Kindly use simple elements inside tabs and accordions such as text and images.

Thank you for your udnerstanding.

#3

Hi,

thanks a lot for your answer.

Unfortunately I can’t use simple content because I need to show my portfolio elements sorted by category and the Cornerstone shortcode (that works perfectly) doesn’t match with the design of my website.
I really need to use this shortcode and tabs are perfect because users just trigger the desired tabs and content change automatically.

Is there a fix I could apply to resolve this issues? Do you maybe have a suggestion for another component that works the same way?

Thanks in advance

Nevermind, I fixed the problem. Well, kinda…

I switched to VC Tabs component, and now the content works properly but now I have another problem :confused:

When I click on a tab the page scroll down to next section and then go up again but not at the original position.

I hope this at least could be fixed with some JS 'cause my only goal is to show the masonry properly and this option works fine for me. Unfortunately there’s this bug…

Can you help me with that?

Thanks again :slight_smile:

Fixed this too! :smiley:

I found a thread on your old forum (https://theme.co/apex/forums/topic/visual-composer-tabs-scroll-down-page-a-little-when-clicked-on/) with a JS that fixed everything :slight_smile: Now just edit some CSS and keep go on with last modifications.

I’m attaching the code here:

jQuery( function($) {

$(document).on(‘click’, ‘li.vc_tta-tab a,li.vc_tta-tab,.vc_tta-panel-title’, function(){
$(‘html, body’).stop();
});

});

#4

Cool, glad you figured things out.

Cheers :slight_smile:

1 Like