Docs

[Alex]

Hello,

want to link to an accordion tab.
It should jump to the tab and opens it.

I found this topic:
https://community.theme.co/forums/topic/open-accordion-from-link/

It jums to the tab but does not open it.
How can I fix that?

Thank you very much for your help!

Regards,
Alex

[Paul R]

Hi Alex,

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.

[Alex]

This reply has been marked as private.

[Lely]

Hello Alex,

Thank you for the credentials.
Please use this code instead:

/* Open Accordion from Link */
jQuery(function($){
  
  $(document).ready(function() {
    var tabnum = location.href.split("#").slice(-1)[0] ;
    var tabnumber = tabnum.split("-").slice(-1)[0];
    x_scroll_to_tab($, $('.x-accordion .x-accordion-group:nth-child('+tabnumber+')>div>a') );
  });

});

function x_scroll_to_tab($, tab_nav) {
            $(tab_nav).click();
	          $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
}
 

Accordion structure is now different that’s why old code will not work. To access specific accordion tab you may access it like this:
http://myvirtualhost.com/open-accordion-tab-page/#collapse-2
We need to add this on the end of the URL:#collapse-2. Adjust to your preferred tab.

Hope this helps.

[Alex]

Hello and thank you very much for your reply!

I have tried and it jumps to the accordion tab but it does not open.

I´ve created this text:
Jump and Open Tab/Accordion

The accordion tab has the ID: “ac-blend”

What is this class for?

What did I have made wrong?

Thanks for your help!

Regards,
Alex

[Alex]

Okay I´ve made it.
I used this link:
http://dev.whiskytasters.de/whisky-a-z/#ac-blend#collapse-4

without classes, etc

Is this right?

Can´t I use IDs for opening the tab?
Because when I change the order of the accordion tabs I have to go over all links I´ve created to the tabs.

Thank you very much!

Regards,
Alex

[Lely]

Hello Alex,

Please update the code to this:

/* Open Accordion from Link */
jQuery(function($){
  
  $(document).ready(function() {
    var tabnum = location.href.split("#").slice(-1)[0] ;
    if(window.location.href.indexOf("#") > -1) {
      x_scroll_to_tab($, $('.x-accordion .'+tabnum+'>div>a') );
      }
  });

});

function x_scroll_to_tab($, tab_nav) {
            $(tab_nav).click();
	          $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
}
 

Then add ac-blend on the class field of accordion item. The URL to access that accordion now will be http://dev.whiskytasters.de/whisky-a-z/#ac-blend

Hope this helps.

[Alex]

Hello,

I have updated the code and added ac-blend to class field.
I also removed “ad-blend” from ID-field.

It is working!

Is that right, that I have to remove it from ID-field?

Thank you very much!

Regards,
Alex

[Joao]

Hi Alex,

If it is working, it is totally fine.

Let us know if you need further help.

Joao

[Alex]

Great! 🙂

Thank you very very much for your help!

Regards,
Alex

[Joao]

You are welcome,

Let us know if you need help with anything else,

Joao

[Author]

Posts