[guybower1Participant]

Hi

Can you tell me if it is possible to have a dropdown submenu take you to a tab on a page, rather than just to the page?

As an example, if I had 4 tabs on a page with various headings and had the same headings on the submenu, can clicking on one of the headings in the submenu take you to, say, tab 4?

Thanks for your continued support

[Rue NelModerator]

Hello There,

Thanks for writing in! Do you want to have a menu item that links to the tab like this url, http://www.example.com/about#tab-3?
If that is the case, please check out this topic: https://community.theme.co/forums/topic/opening-to-tab-from-another-window-scroll-to-anchor-offset-issue/#post-894555

Please let us know if this works out for you. Thank you.

[guybower1Participant]

Hi

No, not really what I was looking for.

So the attached pic shows 4 tabs across the body of the page. If you click on the menu, you are taken to the page where Tab 1 is the active tab.

But what if the menu actually had all 4 tabs listed. Is there a way to be taken to Tab 3 or Tab 2….basically whichever one was clicked on?

And how do I name my tabs, as I have searched everywhere in the settings to try and change Tab 1 to a name, but it eludes me.

cheers

[ChristopherModerator]

Hi there,

Please check this thread : https://community.theme.co/forums/topic/link-to-specific-tabs/

Hope it helps.

[guybower1Participant]

hi

Well, yes and no. I have added the JS in the specific page’s JS area, not the overall site JS area. Is that the correct area? I have set each of the tabs’ class to link_to_tab and have made them all active.

But I think that is way ahead of where I am, as I do not yet even have these tab headings in my submenu, nor can I see how to add them as submenu items.

The menu item in question is About Us. On hover, I want that menu to dropdown and list some submenu items that will link directly to one of the four tabs in the content on the page. So by adding that JS and, class ID and setting them active, I have sort of done things in reverse. Now I need the items to actually appear in the dropdown menu.

cheers

[Rue NelModerator]

Hello There,

You are supposed to add the JS code in the customizer, Appearance > Customize > Custom > JS. That is to make sure that the script will work through out the site and that you were able to click on the menu item and will load the correct tab content.

You will need to edit your menu and add the sub menu items. You may go to Appearance > Menus and manually insert the custom menu items along with its custom link that points to the respective tabs you wanted them to open. To know more how you can create a custom menu, please check out our knowledge base here: https://community.theme.co/kb/wordpress-custom-menus/

Hope this helps.

[guybower1Participant]

OK, so have added the submenu items, the JS is now in the correct location, but when I click on each of them, I am only taken to the main page, rather than directly to one of the tabs.

The link address for each tab is input this way http://feastthailand.com/index.php/about-us/#tab-2

There are 4 tabs to choose from, so they have #tab-1 to #tab-4

cheers

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[guybower1Participant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Please edit your page back again in Cornerstone and change the tab titles. Please see this examples:
http://prntscr.com/c2yx29
http://prntscr.com/c2yxej

And then go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  var tabnav = location.href.split("#tab-").slice(-1)[0];

  if ( tabnav || tabnav != '' ) {

    console.log(tabnav);

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top;
    console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]').offset().top);
    console.log('tab: ' + tabnav + ', yloc: ' + yloc);

    $('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  }
  
})(jQuery);

We would loved to know if this has work for you. Thank you.

[guybower1Participant]

Just checking, do you want me to remove this JS first? This was taken from the post you or one of your colleagues linked to me.

jQuery( function($){
$( document ).ready( function(){
scroll_to_tab ( location.href.split(“#”).slice(-1)[0] );
});

$(‘a.link_to_tab, .link_to_tab a’).on( ‘click’, function( e ){
var window_base = location.href.split(“#”).slice(0)[0];
var url_base = $( this ).attr(‘href’).split(“#”).slice(0)[0];
if ( window_base == url_base ) {
scroll_to_tab ( $( this ).attr(‘href’).split(“#”).slice(-1)[0] );
e.preventDefault();
}

});

function scroll_to_tab ( tab_id ) {
var tab_nav = $(‘.x-nav-tabs .x-nav-tabs-item a[href=”#’ + tab_id + ‘”]’);
if(tab_nav.length >=1) {
$( tab_nav ).trigger(‘click’);
$(‘html,body’).animate({scrollTop: $(tab_nav).offset().top – ( $(‘.x-navbar’).height() + 50 ) },700 ,’swing’);}
}
});

[Rue NelModerator]

Hello There,

Yes please. You may removed the previously given JS code and follow the steps I have mentioned in my last reply from here:
https://community.theme.co/forums/topic/dropdown-menu-to-a-tab/#post-1121722

Please let us know if this works out for you.

[guybower1Participant]

At the moment, all it still does is navigate to the page landing me looking at the static picture and navbar. I still need to scroll down to see the tabs and the first one is still always the active one, regardless of which link I click on.

Do I also need to change the links in the menu section, as they were previously like this http://feastthailand.com/index.php/about-us/#tab-2

Now those tabs have names, do the links need to reflect those names? So http://feastthailand.com/index.php/about-us/#About Us or how would those links be input?

cheers

[guybower1Participant]

Just to let you know, the old JS was removed and replaced with the new one. The tabs were renamed from tab1, tab2 etc, but navigating to any of the tab links on the submenu takes me only to the page. I arrive high up at the top of the page where the navbar and page picture are. Even when I scroll down to where the 4 tabs are, the first tab is always the one that is active, regardless of which submenu item I choose.

Is there something else that needs to be done so as to be able to navigate directly to the required tab from the submenu?

cheers

[guybower1Participant]

Oh, and each tab has link_to_tab in Class, as per the linked thread I was give https://community.theme.co/forums/topic/link-to-specific-tabs/

Is that still correct with the new JS?

Thanks once again

[Author]

Posts