Docs

[andreulloveras]

Hi,

i’m trying to open a tab from another link like this post: https://community.theme.co/forums/topic/open-accordion-from-link/page/5/

i used this code:

/* Open Accordion from Link */
jQuery(function($){

	$(document).ready(function(){ jump_to_tab( $, $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"], a[href="#' + location.href.split("#").slice(-1)[0] + '"].x-accordion-toggle') ); });
	$('.enable_jump_to').click( function(e){ e.preventDefault(); jump_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[href="' + $(this).attr('data-jump-target') + '"], a[href="' + $(this).attr('data-jump-target') + '"].x-accordion-toggle') ); } );

});

function jump_to_tab($, tab_nav) {
			if(tab_nav.length >=1) {
	            $(tab_nav).click();
	            $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
        	}
}  

i want to open a tab from http://www.arpgirona.com/ofertes

and put it into Appearance/Customizer/Custom/Global Javascript

Then i try to open a tab from a link from this page http://www.arpgirona.com/outlet with this code:

<a href="http://arpgirona.com/ofertes/#tab-3">Jump and Open Tab/Accordion #1</a>

but it doesn’t seems to work.

Can you help me?

THank you!

[andreulloveras]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! We have made some changes with the tabs. The above code may no longer apply especially if you are now using the latest version of Cornerstone. Please have your code updated and use this instead:

(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);

Please let us know if this works out for you.

[andreulloveras]

I managed to use offset in this part of code, i think that it works well, if i can improve the code i’ll be glad to know it, but it works now, thank you so much!

`var yloc = $(‘.x-tab-content [data-cs-tab-index=”‘ + tabnav + ‘”]’).offset(80).top;
console.log($(‘.x-tab-content [data-cs-tab-index=”‘ + tabnav + ‘”]’).offset(80).top);
console.log(‘tab: ‘ + tabnav + ‘, yloc: ‘ + yloc);`

Hi,

it works, but there’s only one problem, the tab open but the page loads scrolled down, so i’d like the tab to be opened and the page be scrolled on top.

So, there’s a way to make the page to not scroll down?

Thank you so much for you efficient support!

This theme is amazing!

Edit: I cheked it and think that it happens because i have fixed menu on top, so the menu displays over the Tab and don’t let the tab to be read, is there a way to make the same of the code but -80px height? Thank you!

[Zeshan]

Glad to hear you were able to figure it out! 🙂 Have a good day.

[Author]

Posts