Shortcode in tabs

Content that requires rendering on the initial load won’t load well inside of a hidden tab. Our tabs do single a resize event which most plugins will use to trigger a relayout in cases where the content is rendered via javascript.

It doesn’t appear your gallery or posts shortcodes are set up that way.

So you can change the way the tabs work and instead of display none, you could change the css visibility.

.kt-tabs-wrap .wp-block-kadence-tab {
display: block;
visibility: hidden;
height: 0;
padding: 0;
border-width: 0 !important;
}
.kt-tabs-wrap.kt-active-tab-1>.kt-tabs-content-wrap>.kt-inner-tab-1,
.kt-tabs-wrap.kt-active-tab-2>.kt-tabs-content-wrap>.kt-inner-tab-2,
.kt-tabs-wrap.kt-active-tab-3>.kt-tabs-content-wrap>.kt-inner-tab-3,
.kt-tabs-wrap.kt-active-tab-4>.kt-tabs-content-wrap>.kt-inner-tab-4,
.kt-tabs-wrap.kt-active-tab-5>.kt-tabs-content-wrap>.kt-inner-tab-5,
.kt-tabs-wrap.kt-active-tab-8>.kt-tabs-content-wrap>.kt-inner-tab-6 {
visibility: visible;
height: auto;
padding:20px;
}

add that in your custom css.

Ben

Hi Ben
Thanks for your quick answer, but it didn’t work.
I tried with diferente themes without any difference. It keeps displaying only the selected tab on saving and not the first one as I wrote.
Avelino

.kt-tabs-wrap .wp-block-kadence-tab[role="tabpanel"] {
display: block;
visibility: hidden;
height: 0;
padding: 0;
border-width: 0 !important;
}
.kt-tabs-wrap.kt-active-tab-1>.kt-tabs-content-wrap>.kt-inner-tab-1,
.kt-tabs-wrap.kt-active-tab-2>.kt-tabs-content-wrap>.kt-inner-tab-2,
.kt-tabs-wrap.kt-active-tab-3>.kt-tabs-content-wrap>.kt-inner-tab-3,
.kt-tabs-wrap.kt-active-tab-4>.kt-tabs-content-wrap>.kt-inner-tab-4,
.kt-tabs-wrap.kt-active-tab-5>.kt-tabs-content-wrap>.kt-inner-tab-5,
.kt-tabs-wrap.kt-active-tab-8>.kt-tabs-content-wrap>.kt-inner-tab-6 {
visibility: visible;
height: auto;
padding:20px;
}

Looks like that css wasn’t specific enough, try the above ^

Hi Ben
Things are better now, but still with many flaws. There’s something displayed but it seems that the closing of each tab doesn’t work well.
I’m trying a complex solution, with a total of 16 tabs (5 primary, 4 nested in the second, and 7 in the third). Almost all the contents is displayed (there’s an iframe in the last tab that never shows) but very mixed, as you may see in
https://touristrips.com/places/europe/portugal/leiria-district/alcobaca/.
Is it there anything else that I may try?
I know I’m becoming boring, but things turn very complicated when you are not an expert
and aging…74.
Greetings
Avelino

Hey,
I can’t recommend my hack for a complex nesting of tabs, it’s not designed for that. It’s not really designed, it’s a hack because your shortcodes are not resetting with the window resize event.

I suggest you reconsider and follow up with wherever you are getting your shortcodes from, I suggest you ask for those to reinit via javascript on the resize event.

Ben