[cjavierParticipant]

Hi guys!

I’m trying to scroll-to and open specific Accordion/Tab element with URL. I’d like a user to click a link to another page on the site and based on URL #ID anchor down and open that part of the accordion.

So I found this earlier thread which Themeco supposedly provided a solution for this exactly. But it’s not working! :O

Open Accordion From Link

Perhaps the javascript needs to be updated for recent versions? I’ve made sure to add an ID to each accordion tab and inserted the JS code in the customizer custom JS section.

Thanks!

[RupokMember]

Hi there,

Thanks for writing in! Here goes a working example – https://community.theme.co/forums/topic/accordion-external-link/#post-854999

Cheers!

[cjavierParticipant]

Unfortunately the post in that thread did not solve the issue. It anchors but does not open my accordion.

Please advise 🙂

[RupokMember]

Hi there,

Let’s provide your URL so that we can have a look.

Thanks!

[cjavierParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! To resolve your issue, please use this JS code instead:

(function($){
  var pageAddress = window.location.hash;

  $(document).ready(function(){

    if ( pageAddress || pageAddress != '' ) {

	    console.log(pageAddress);

	    var navbar = $('.x-navbar').outerHeight();
	    var yloc = $(pageAddress).offset().top - 160;
	    console.log($(pageAddress).offset().top);
	    console.log('tab: ' + pageAddress + ', yloc: ' + yloc);
	    
	    $('' + pageAddress + ' .x-accordion-toggle').trigger('click');

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

  });
  
})(jQuery);

We would loved to know if this has work for you. Thank you.

[cjavierParticipant]

Hello,

Unfortunately, doesn’t work. The link anchors but it doesn’t open the appropriate accordion.

Thanks for your continued support 🙂 Please advise!

Cheers

[Paul RModerator]

Hi,

There is a syntax error in your js code.

I went ahead and fix it and it seems to be working now.

Kindly check on your end.

Thanks

[cjavierParticipant]

Hi Paul,

It’s working now however, it appears the Javascript provided is still the same. What did you change in order to get this working? I haven’t used any custom javascript elsewhere so not sure which syntax error was in the js code.

Thanks!

[Paul RModerator]

The quotes were different when I checked.

eg. I change this

    if ( pageAddress || pageAddress != '' ) {

to this

if ( pageAddress || pageAddress != '' ) {

Thanks

[cjavierParticipant]

Thanks for the correction. I had no clue that indents affected JS code, unlike CSS. Good to know 🙂

How would I be able to trigger the same behavior for links on the same page? I noticed this works only when coming from an external link.

Thanks again!

[Paul RModerator]

Hi,

Sorry it wasn’t the indention that caused the issue.

Let me try again.

It was looking like this.

if ( pageAddress || pageAddress != &#x00027&#x00027 ) {

So I change it to this.

if ( pageAddress || pageAddress != '' ) {

To make it work on the same page, add the code below in Custom Edit Global JS

jQuery(document).ready(function($){
$( ".enable_jump_to" ).on( "click", function() {
    var mynavbar = $('.x-navbar').outerHeight();
    var mytarget = $(this).attr('data-jump-target');
    var tloc = $(mytarget).offset().top - 160;
    
 $('' + mytarget + ' .x-accordion-toggle').trigger('click');

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

Hope that helps.

[cjavierParticipant]

Works like a charm! Thanks so much 🙂

You’ve helped make the user experience on my site so much more pleasant ^_^

Cheers and Happy new Year!

[RadModerator]

You’re so much welcome and happy new year 😉

[Author]

Posts