Docs

[tcultech]

Hello,

I’ve read all the posts about this, but I’m still having trouble getting it to work properly on my site.

I’ve added the JQuery script to global Javascript from this post:

https://community.theme.co/forums/topic/open-accordion-from-link/page/5/#post-803817

I have an accordion with 21 accordion items and I’m going to link to each accordion item from a menu listing in the main navigation (Products).

When I try to link to my URL (Example: http://www.site.com/products/#collapse-4 ) it’s not working at all.

I see in the inspector:

#products > div:nth-child(1) > div.x-accordion-heading > a
#products > div:nth-child(2)

Do I need to add named anchors in addition for each accordion item? It seemed like it was said that these are created automatically so I’m not sure at this point.

Any help would be wildly appreciated!

[tcultech]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

That code is no longer applicable due to structure changed on the accordion element. Please try this new one

jQuery( function( $ ) {

var collapse = location.hash.replace('#collapse-', '');

if ( collapse !== '' ) {

$(document).ready( function() {

$( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );

} );

}

} );

Hope this helps.

[tcultech]

Hi Rad,

Thanks a ton, that helps a lot!

I’m definitely seeing the links working from other pages.

Minor problem: once the page loads, the links in the menu don’t work on-page since I’m guessing the script is only for an off-page link to the accordion item, and not for named anchors on the page.

Is there a way to make the menu items also work once you’ve landed on/loaded the page as well as from off-page?

Thanks very much for your time!

[Lely]

Hello There,

Please update the Javascript code to this:

jQuery( function( $ ) {

var collapse = location.hash.replace('#collapse-', '');

if ( collapse !== '' ) {

$(document).ready( function() {

$( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );

} );

}
  
  $('.x-nav-wrap .x-nav a').click(function(){ 
    
    var collapse1 = this.hash.substr(1);
    var collapse2 = collapse1.replace('collapse-', '');
    if(collapse2 !== ''){
    $( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );
      }
 

    
  });

} );	

Hope this helps.

[tcultech]

Hell0!

Thanks so much for your reply and assistance on this.

I’ve updated the global JavaScript and it’s not quite working. The links work perfectly when I’m coming from any other page, but once I’m on the page, it’s still not firing when I select/click another menu item while on the page.

I deleted all transients, removed my cache and tested in both Chrome and Safari after reloading the page.

I’m using the link format in the menu of http://www.mysite.org/products/#collapse-8 (to go to accordion 8)

Is that correct?

Thanks again for taking a look at this—I realize it’s a bit specialized, but I’m hoping that it will help others who want to do the same thing.

[Lely]

Hi There,

Please try this instead.

jQuery( function( $ ) {

var collapse = location.hash.replace('#collapse-', '');

if ( collapse !== '' ) {

$(document).ready( function() {

$( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );

} );

}
  
  $('.x-nav-wrap .x-nav a, .ubermenu-item a').click(function(){ 
    
    var collapse1 = this.hash.substr(1);
    var collapse2 = collapse1.replace('collapse-', '');
    if(collapse2 !== ''){
    $( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading a').trigger('click');

setTimeout ( function() {

 $('html,body').stop().animate({scrollTop: $( '.x-accordion-group:nth-child(' + collapse2 + ') .x-accordion-heading').offset().top - ( $('.x-navbar').height() - 43 )},700 ,'swing');

}, 300 );
      }
 

    
  });

} );	

I have adjusted the code to work for ubermenu. The previous adjustment will work on default X navbar only.
Hope this helps.

[tcultech]

That worked! It’s all working beautifully and I really appreciate your help. I had forgotten about Ubermenu and thank you for the effort to adjust the code for that.

Everything regarding this ticket is resolved and I’m really astonished by the level of support.

Much appreciated!!

[Joao]

Great to hear it,

Let us know if you need help with anything else.

Joao

[Author]

Posts