Docs

[Lindy_1]

In other themes I have found that the url changes when you click on a tab and you’re able to copy that and paste it as the link. Then when the button is clicked the visitor is taken to the page and the tab is already open. I searched the forum but didn’t find an answer so I’m hoping you can assist me, I will send my log in details privately, cheers Kinnear

[Lindy_1]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! That’s also discussed several times on our forum as well. Follow these :

https://community.theme.co/forums/topic/linking-to-tabbed-content/#post-45471
https://community.theme.co/forums/topic/opening-specific-tabs-with-linksbuttons/

Hope this helps.

[Lindy_1]

I tried using the suggested code and it din’t work, I am a designer not a developer so my code knowledge is limited. in other themes the tab information is in the url thread and you can just copy that and it works fine. Can you please provide mw with clear instructions for me to follow due to my skill level with this, cheers greatly appreciated

[Rue Nel]

Hello There,

To better assist you, could you please point us the url of your page that has the tabbed content? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[Lindy_1]

This reply has been marked as private.

[Paul R]

Hi,

Please provide the exact url of the page where we can see your tabbed content.

Thanks

[Lindy_1]

Hi

Sorry about that I thought the one I previously was correct, could have been the one I used for the dev site.

Home

cheers Kinnear

[Rad]

Hi there,

Another support here, and I’m not really sure what’s tab you’re currently referring. Is it the navbar’s menu? or Cornerstone’s tab element? Would you mind providing a sample of what you’re trying to achieve?

Thanks!

[Lindy_1]

Hi, on the homepage I have 4 columns directly under the slider. I was these LEARN MORE buttons to open the ABOUT page (which they do) however I want it to open on the following

PAGE – http://upperyarra.net.au/about/
Homepage LEARN MORE button 1 – this one works because the page defaults to the TAB 1 COMMUNITY BANKING
Homepage LEARN MORE button 2 – want to to open the ABOUT page with TAB 2 THE BENEFITS
Homepage LEARN MORE button 3 – want to to open the ABOUT page with TAB 3 CONTRIBUTION
Homepage LEARN MORE button 4 – want to to open the ABOUT page with TAB 4 – PERSONAL BANKING

The element used on the ABOUT page is TABS

Hope this helps cheers Kinnear

[Rue Nel]

Hello Kinnear,

Thank you for the clarifications!

You can certainly achieve what you have in mind by using a custom link in your learn more buttons. You can use this link format:

http://upperyarra.net.au/about#tab-1
http://upperyarra.net.au/about#tab-2
http://upperyarra.net.au/about#tab-3
http://upperyarra.net.au/about#tab-4

And then you use a JS code in your customizer, Appearance > Customize > Custom > JS

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

  if ( tabnav || tabnav != '' ) {    
    
   $(window).on( 'load', function() {

    console.log(tabnav);

    var navbar = $('.x-navbar').outerHeight();

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

    setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
   
    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);

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

   }, 750 );

   } );

  }
  
})(jQuery);

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

[Lindy_1]

Thanks it worked a treat, greatly appreciated

cheers Kinnear

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts