[NeversDesignParticipant]

Hi there,

Let me start off by saying that I realize you don’t directly support third party plugins, but I figured I would ask anyway, as this is something that worked previously and doesn’t as of the latest update.

The background:

I use Toolset Types and Views (made by the lovely folks at OnTheGoSystems) for all of my custom post type needs, and I had been using X’s tabbed content shortcodes in concert with one of my CPT’s. When I set it up, everything worked fabulously – the [tab_nav] was part of one View to give me titles for each, and the [tabs] were in a second View (because Views only allows one loop per View) with the content for each tab.

As of the latest update, my tabs no longer work as expected, and I’m wondering if there is anything to be done on the X side to get them working again.

Not to compare apples and oranges, but in Bootstrap, the tab nav and tab content sections are connected via id and data-target attributes, while in X, there doesn’t seem to be so explicit a connection, leading me to think that the reason for the breakage has to do with a problem traversing through the extra divs created by the Views.

I know I can add id’s and classes to my [tab_nav] and [tabs], but is there a way to use those id’s to connect them?

An example of the issue I’m having is on this page: https://kingswoodacademy.ca/parent-resources/school-supplies/

The tabs render fine, and if I add/remove the ‘active’ class via the Inspector, everything works, so I just need to be able to get the tab nav and the tab content to talk to each other.

Any help at all would be spectacular.

[RupokMember]

Hi there,

You got it right. The extra generated div is breaking the expected DOM traversing. You can try using other Tab by any third party plugin. Cornerstone Tabbed content might not be suitable for complex content unfortunately.

Thanks!

[NeversDesignParticipant]

I figured as much.

Any idea why it worked on older versions but not now?

Thanks for your help!

[NeversDesignParticipant]

For the record (and for anyone else using Toolset with X), I was able to get the tabs to work in the end by creating the [tab_nav] manually and placing it inside the View before the loop.

The final result looks like this in the Output Editor:

    [wpv-layout-start]
      [wpv-items-found]
        [tab_nav type="three-up"][tab_nav_item title="tabTitle1" active="true"][tab_nav_item title="tabTitle2" active=""][tab_nav_item title="tabTitle3" active=""][/tab_nav][tabs]
	<!-- wpv-loop-start -->
	<wpv-loop>
          [wpv-item index=1]
            [tab active="true"][wpv-post-body view_template="Loop item in View"][/tab]
          [wpv-item index=2]
      	    [tab][wpv-post-body view_template="Loop item in View"][/tab]
          [wpv-item index=3]
      	    [tab][wpv-post-body view_template="Loop item in View"][/tab]
	</wpv-loop>
        [/tabs]
	<!-- wpv-loop-end -->
      [/wpv-items-found]
      [wpv-no-items-found]
	<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
      [/wpv-no-items-found]
    [wpv-layout-end]

Hopefully someone besides me will find this helpful.

[RadModerator]

Thanks for sharing! It’s probably because the new tab system implements the new structure based on indexes.

[Author]

Posts