Docs

[Tandem26]

Hi there I worked through quite a few threads about this query but didn’t manage yet to make this work:
I would like to set up the page navibation in the nav bar so that by clicking ‘contact’ the home page scrolls to the accordion item ‘contact’ and opens this item.

I need this to work from the homepage nav bar itself (set to one page navigation) and from other pages.

I have so far updated the custom javascript to the link you pointed me to in my last query (#897505, old thread), which is the following:

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

Now I don’t know how the link in the nav bar menu needs to look – is it a Custom Link in Customizer > Menus > navigation ? What do I need to add to the “URL” ?

I understand that I don’t have to give the accordion item a unique ID – is that correct? How does the link find the correct accordion tab?

There is a class I need to add – I am not sure where exactly – is it in ‘class’ on the particular accordion item?

I am sorry I cannot give you my URL since I am working locally, I hope this is something that can be solved without you having to take a closer look ?
(WP 4.5, X Theme up to date)

Many thanks
Simone

[Rupok]

Hi Simone,

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Tandem26]

1. Hi I don’t quite understand your reply – can you not tell me where I need to add the class and the link you refer to in other threads about this issue (eg. #post-897505 etc)?

Is it different just because it’s a link from the nav bar?

I cannot believe just because it’s not a link from a button it makes this all that different.

2. Could you answer how the link, wherever places, finds the correct accordion item? (E.g. what would be the ID of accordion item no. 1 on the second accordion on, say, the home page?)

Thanks

[Jack]

Hi there Simone,

Thanks for writing back, unfortunately this is quite different than linking to a section, as an accordion item doesn’t have it’s own unique class or ID. A accordion item only has the open or closed class.

To make this work, you’d need to modify the accordion item, so that it has a unique class/id which can then be used within the Javascript to trigger the open and scroll to of that specific item, there is also the issue that the height could be wrong when the accordion item is opened and the height would need to be calculated within the javascript to take into account the accordion items height so that when it’s opened your browser isn’t above the accordion item itself.

Thank you!

[Author]

Posts