Docs

[drmodiho]

Hello,

I integrated tabbed content boxes in another main tabbed content box. However the integrated once are not working properly. For example I set certain tabs and tab contents on active mode, but they are not displaying active. Only the first one on the first tab of the main tabbed content box is displaying correctly.

Then, I tried to split columns in tabs of the integrated tabbed content boxes, but this isn’t working either.

I attached some screenshots.

Thanks in advance for your help,

best regards,

Moritz

[drmodiho]

This reply has been marked as private.

[Friech]

Hi Moritz,

Thanks for writing in! But I’m not seeing the said tab in any of your page, would you mind giving us direct URL where the tab is?

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[drmodiho]

Hey,

the tabs are all on the following page:

http://www.medibroad.com/kenya/

Thanks moritz

[Rupok]

Hi Moritz,

Thanks for updating. It’s working fine but you didn’t set any initial active tab for the Tab you are having issue. Let’s set active=”true” for the first Tab item.

Hope this makes sense.

Cheers!

[drmodiho]

This reply has been marked as private.

[drmodiho]

I got an additional question:

How can I adjust all of the tabbed content boxes to have the same height as the images next to them. Is it then possible as well to have them similar responsive as the images so that image and tabbed content box always adjusts to the same size? That would be fantastic 😉

Thanks again in advance, really appreciate your help.

Best regards,

Moritz

[Zeshan]

Hi Moritz,

Thanks for writing back!

For the accordions inside tabs issue, please try adding following CSS code under Custom > CSS in the Customizer:

.x-tab-content>.x-tab-pane:not(.active) {
    height: 0 !important;
    overflow: hidden;
    padding: 0;
    display: block;
}

Regarding the same height tabbed content as of the images, it’s not possible out of the box. It could be possible with custom development, but this would be outside the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[drmodiho]

Hey Zehsan,

thanks for the answer. Unfortunately the CSS code you provided me is not working.

Do you have any other ides?

Thanks Moritz

[Rad]

Hi there,

To confirm, the issue is that the first tab is always active, right?

But yes, the active status won’t take effect. I did set active=”true” to the second tab, but during render, it’s still the first tab that is active.

And yes, the above CSS will now work since it’s only applicable to non-active tab, and the issue is the always active tab. Let’s do this work around, instead of adding active="true", let’s add class="active_tab".

Then simply add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery ( function($) {

$('.x-nav-tabs-item:not(.active_tab) a').on( 'click', function() {

$( '.x-tab-content .x-nav-tabs-item.active_tab a' ).trigger('click').parent().removeClass('active_tab');

} );

} );

Tested it and should be working 🙂

Thanks!

[drmodiho]

Hey,

I tried it, but I still don’t get it done.

Do I have to add class=”active_tab” instead of active=”true” to the [tab_nav_item title=”Facts” active=”true”] and/or to [tab active=”true”]?

Thanks again for your help,

best regards,

Moritz

[drmodiho]

The issue is, that I like to have all “first tabs” of each tabbed content box to be active. So far, only the “first tab” of the first tabbed content box is active and visible, all other “first tabs” of the other boxes aren’t visible (they are collapsed).

Do you understand what I mean?

Thanks again,

Moritz

[Rad]

Hi there,

In that case, you just need to replace the above code with this. No further change needed.

jQuery ( document ).ready( function( $ ) {

$('.x-text > .x-nav a').on( 'click', function() {

setTimeout ( function() {

$( '.x-text > .x-tab-content > .x-tab-pane.active .x-nav-tabs-item.active a' ).click();

}, 300 );

} );

} );

Cheers!

[drmodiho]

Hey Rad,

awesome. This was the right function 😉 Thanks so much.

One more little thing. The “first pages” of the Sub-tabs now show up, but they open with a little delay. Is it possible to have them open without any delay when clicking on the Main-tabs?

Thanks again for your great help. Really appreciate it.

Best regards,

Moritz

[drmodiho]

Hey,

I got a few more problems:

Please check the tabs on: “Destinations > Kenya”

When clicking the “Main tabs”, I now see the first page of the “Sub Tabs”. However a short flicker of the content of the second tab shows up before the first tab opens.

Additionally, for example when opening the second or third tab of the “Sub Tabs” and then navigating to another tab of the “Main Tab” and then going back to the previous one, the second tab of the “Sub Tab” is still open. Is it possible to change that, so that the first tab is always showing when clicking the “Main Tab”.

Its a bit complicated to explain. Hope you get what I mean.

Thanks in advance for any help.

Best regards,

Moritz

[Author]

Posts