Docs

[Inception Plumbing]

Hello,

I’m fairly new to the realm of building web pages and seem to be stuck on solving the issue with landing on specific tabs within tabbed content using a link or button. I typically only use examples and short codes to build my pages. I really know nothing of css and java script. I have used some css to change a color globally but that’s really it. I have looked over the forum and have found lots of examples of java scrip that needs to be pasted into the customizer in which i have done and still have not had much luck. It seems as though some people are getting it to work and others are not.

I went ahead a built an example of what I’m looking for which is the link below. Note that all of these will be opening in different pages. So for instance, the home page will have a button or icon and when clicked, it will link to another page, there it will open a specific tab. I do work along side a web guy and his code is the blue icon buttons, mine are the buttons. Can someone please give me a step by step walk through on how to do this.

I currently have no java code in place

Thank You So Much,
Darrell

Link To Example: http://inceptionplumbing.com/test-tab-page/

Page Code:
[x_line]
[tab_nav type=”five-up” float=”left”]
[tab_nav_item title=”1″ active=”true”]
[tab_nav_item title=”2″ active=””]
[tab_nav_item title=”3″ active=””]
[tab_nav_item title=”4″ active=””]
[tab_nav_item title=”5″ active=””]
[/tab_nav][tabs][tab active=”true”]
Content 1
[/tab][tab]
Content 2
[/tab][tab]
Content 3
[/tab][tab]
Content 4
[/tab][tab]
Content 5
[/tab][/tabs][clear]
[x_line]
[column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#1/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 1[/x_button]
[/column] [column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#1/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 2[/x_button]
[/column] [column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#1/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 3[/x_button]
[/column] [column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#1/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 4[/x_button]
[/column] [column type=”1/5″ last=”true”]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#1/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 5[/x_button]
[/column][clear]
[x_line]
<div class=”service_icon”>

Tab 1
</div>
<div class=”service_icon”>

Tab 2
</div>
<div class=”service_icon”>

Tab 3
</div>
<div class=”service_icon”>

Tab 4
</div>
<div class=”service_icon”>

Tab 5
</div><div style=”clear: both;”></div>
[x_line]

[Inception Plumbing]

Updated Code

[x_line]
[tab_nav type=”five-up” float=”left”]
[tab_nav_item title=”1″ active=”true”]
[tab_nav_item title=”2″ active=””]
[tab_nav_item title=”3″ active=””]
[tab_nav_item title=”4″ active=””]
[tab_nav_item title=”5″ active=””]
[/tab_nav][tabs][tab active=”true”]
Content 1
[/tab][tab]
Content 2
[/tab][tab]
Content 3
[/tab][tab]
Content 4
[/tab][tab]
Content 5
[/tab][/tabs][clear]
[x_line]
[column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#1/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 1[/x_button]
[/column] [column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#2/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 2[/x_button]
[/column] [column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#3/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 3[/x_button]
[/column] [column type=”1/5″]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#4/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 4[/x_button]
[/column] [column type=”1/5″ last=”true”]
[x_button shape=”square” size=”mini” float=”none” block=”true” href=”/test-tab-page/tab#5/” target=”blank” info=”none” info_place=”top” info_trigger=”hover”]Tab 5[/x_button]
[/column][clear]
[x_line]
<div class=”service_icon”>

Tab 1
</div>
<div class=”service_icon”>

Tab 2
</div>
<div class=”service_icon”>

Tab 3
</div>
<div class=”service_icon”>

Tab 4
</div>
<div class=”service_icon”>

Tab 5
</div>
<div style=”clear: both;”></div>
[x_line]

[Jack]

Hi there Darrell,

Thanks for writing in!

Did you want the buttons to link to tabbed content on a specific tab? If so do you have the tabs already set up in which you want the buttons to link to? I checked your example page, but wasn’t 100% sure of what needs to be done.

If you could clarify please and we’d be more than happy to assist. 🙂

Thank you!

[Inception Plumbing]

So basically that is just and example of the two diffrent types of linking i would like to do throughout the whole site. I will be using buttons to link to specific tabs. For instance button 2 will open tab 2 ..button 3 will open tab 3 and so on. with the 5 picture icons those will do the same, 1 will open one..2 will open 2 and so on. I basically was using this page as an example because i have these spread out through the site. once i seen how you do it then i can study what code you gave me and use it where i need it.
example
http://www.inceptionplumbing.com look ate the “gas leaks ” icon. That icon will need to open up inceptionplumbing/leaks/ page while opening up the gas leak tab.

[Jade]

Hi Darrell,

Please try to add a class to the tab links so the code will be like this:

<a href="#tab-1" class="switch-tab">Tab</a>

Then add this code in the custom JS:

jQuery(document).ready(function($) {
  $('a.switch-tab').on('click', function(e) {
    e.preventDefault();
    id = $(this).attr('href');
    console.log(id);
    $('.x-nav-tabs-item > a[href="' + id + '"]').click();
  });
});

Please note that there is a chance that this will not work because there is currently a JS error on your site when I checked on the console so kindly take a look at that too.

[Inception Plumbing]

OK, the icons seem to be working great. Now I just need assistance on changing the code for my blue button/images so i can link those to specific tabs on other pages. Lets say i want the tab 3 blue icon on this page http://inceptionplumbing.com/test-tab-page/
to open this page
http://inceptionplumbing.com/residential/services/leak-repair/ while simultaneously opening the third tab.
attached is the code for the test-tab-page

Thanks So Much

[Inception Plumbing]

Jade,

things went south with the java script. Had some crazy things going on with the site after entering it. I went into the customizer to remove it and the customizer menu has now disappeared. please give me directions on how to remove this code manually asap.

[Rad]

Hi there,

I like to help, but I’m not sure what’s the error you’re getting after adding the code. If it’s faulty, then I should able to see it even outside the customizer. Would you mind providing your site’s admin login credentials in private reply? This might not just about the javascript

Thanks.

[Inception Plumbing]

Seems as though it was only in chrome on my laptop. everything is working fine now.

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Arthur W]

Hi

I wonder if I’m being stupid in not fully understanding this. I’m in the same position as agreatdivide.

I have a page with 3 tabs (page 1). I want there to be a default for when you access this page via the menu (tab 1). However I’d like to be able to click on a link on another page (page 2) that would take you the 2nd tab instead of the default 1st tab.

I’ve tried putting the javascript above in the overall site’s custom javascript area. I then had the link

Tab on page2 but nothing happens.

Have I misunderstood – and if so what should I be doing. (If I’ve got it right, any ideas why it’s not working).

[Zeshan]

Hi Arthur,

Thanks for writing in!

Please provide us with the URL of the page where you have the tabs so we can take a closer look to the issue.

Thank you!

[Arthur W]

This is the page with tabs.

http://newsite.marketing-intelligence.co.uk/ci-resources/papers-presentation/

If you get to that page from the menu, then it should open in the first tab (i.e. White Papers & Articles).

I have another page that will link to this page. I’d like to be able to link directly to the Presentations Tab – and have this active and open when you arrive at the page. Or to the videos page!

I’ve tried a few things – including the javascript, etc. on the referring page but haven’t got it working. (I’ve since removed the scripts).

[Lely]

Hi There,

Thank you for the link. Please check this links instead:
https://theme.co/x/member/forums/topic/link-to-specific-tabs/#post-194644

Hope this helps.

[Rad]

Hi there,

What scripts are removed?

And due to recent changes in the cornerstone, old codes will no longer work. Please add this code to Admin > Appearance > Customizer > Custom > Global Javascript

jQuery ( function( $ ) {

var tab_id = parseInt( window.location.hash.split('#tab-')[1] );

if ( tab_id > 0 ) {

$('.x-nav.x-nav-tabs .x-nav-tabs-item:nth-child(' + tab_id + ') a').trigger('click');

setTimeout( function() { 

$('html,body').stop().animate({ scrollTop: $('.x-tab-content > .x-tab-pane:nth-child(' + tab_id + ')').offset().top - ( $('.x-navbar').height() + 45 ) },700 ,'swing');

}, 300 );

}

} );

Then you can simply link to your tab like this, http://newsite.marketing-intelligence.co.uk/ci-resources/papers-presentation/#tab-2

Please note that this code only supports one tab instance per page, for now.

Thanks!

[Author]

Posts