[partner@lhseattle.comParticipant]

Hello,

Is there any new code for having a link at the bottom of the content on one tab to open the next tab?

I have gone through all the different threads and they do not seem to work.

Or is there shortcode for the tabs that they can be listed at the bottom as well? On mobile the tab content is long so it is not as usable.

Thanks!

[Nabeel AModerator]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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.

[partner@lhseattle.comParticipant]

Here is the URL:
http://www.restorevisioncenters.com/lasik/procedure-to-recovery

Thanks!

[Rue NelModerator]

Hello There,

Thanks for providing the url of your site. To open the next tab with a link, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

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

  if ( tabnav || tabnav != '' ) {    
    
   $( document ).ready ( 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);

And then at the bottom of your tab content, you add a custom html code:

<a href="#tab-1">Open the next Tab</a>

Please make sure that the tab number corresponds to the number of the next tab. Hope this make sense.

[partner@lhseattle.comParticipant]

Thanks for getting back to me. I added the javascript and the link at the bottom … it did not do anything.

[Nabeel AModerator]

Hi again,

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

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

[partner@lhseattle.comParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the credentials.

Please try to update the code to this:

(function($){
  
     $('.open-next-tab').click(function(e){
       e.preventDefault();
      tabnav =  $(this).attr('href').split("#tab-").slice(-1)[0];;
       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').offset().top-100;
    console.log($('.x-tab-content [data-cs-tab-index="' + tabnav + '"]'));
    console.log('tab: ' + tabnav + ', yloc: ' + yloc);

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

   }, 750 );

    
     });

  
})(jQuery);

Then the link should have class. If you add the following link at the end of your first content tab it will open the next tab.
<a href="#tab-2" class="open-next-tab">Open the next Tab</a>

Hope this helps.

[partner@lhseattle.comParticipant]

It worked!! Thank you so much for your help!

[JoaoModerator]

Glad to hear.

Let us know if you need further help.

Joao

[juliawuethrichParticipant]

Hello,

I kind of want to reach a similar goal and tried the code mentioned above on my site too. I certainly manage to scroll down to the relevant tab but still it doesn’t open. I tried numerous other javascript codes from other threads, none of them worked (guess most of them are outdated due to the change from id to index?!).

Is it even possible to have a link (on the same page) that allows scrolling down and open the relevant tab? (I used the “Accordion” element in Cornerstone)

Thanks a lot for your help!

Best,
Julia

[juliawuethrichParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thanks for providing your login credentials.

Please note that the code above is for tabs and yours is accordion.

I went ahead and change your js code to this.

(function($){
  
     $('.open-accordion').click(function(e){
       e.preventDefault();
      myid =  $(this).attr('href');
   
       var navbar = $('.x-navbar').outerHeight();
       var adminbar = $('#wpadminbar').outerHeight();
       
    $('.x-accordion .x-accordion-body').removeClass('in');
    $('.x-accordion>'+myid+ ' .x-accordion-toggle').trigger('click');

    setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
   
    var yloc = $(myid).offset().top-navbar-adminbar;

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

   }, 750 );

    
     });

  
})(jQuery);

I created links for the first three, kindly add an id to each accordion item ie. accordion1, accordion2, accordion3….

Then create links targeting those ids

eg.

<a href="#accordion1" class="open-accordion">Accordion 1</a> 
<a href="#accordion2" class="open-accordion">Accordion 2</a> 
<a href="#accordion3" class="open-accordion">Accordion 3</a>

Hope that helps

[juliawuethrichParticipant]

Wow, that’s amazing! Works perfectly.

Thanks a lot for your effort.

Best,
Julia

[ChristopherModerator]

You’re welcome.

[Author]

Posts