[LumosParticipant]

Hey Theme.Co,

I have been using an xthemeusers.com article (see below) on how to open an Accordion list item from a link.
I am having difficulty getting the accordion to open up after already being on the page.

My website: http://suaspilots.org/knowledge-center

Example: When on the Knowledge Center page, on the sidebar, i’ll click on the Section 3 link, which takes me to that page and opens up the section 3 accordion. But while on that page, if I click the Section 2 link in the sidebar, it won’t scroll up and open that accordion.

So to summarize, the accordion only opens up if you’re coming from a different page.

Xthemeusers.com/resources/…

Thanks in advance 🙂

[Rue NelModerator]

Hello There,

Thanks for writing in!

To resolve your issue, please check out this thread: https://community.theme.co/forums/topic/accordion-external-link/#post-854999

Please let us know how it goes.

[LumosParticipant]

Hi Rue,

Thanks for the link. I tried the following code below but I got the same error as D.UI.F. (TypeError: Cannot read property ‘top’ of undefined) but I do not have multiple accordions inside each other. There is just 1.

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

  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);
    
    $('.x-accordion-toggle[href^="' + pageAddress + '"').trigger('click');

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

[Nabeel AModerator]

Hi again.

Try replacing the previous code with the following code:

jQuery( function( $ ) {
	$( document ).ready ( function() {
		var target_accordion = window.location.hash;
		$( target_accordion ).find('.x-accordion-toggle').removeClass('collapsed');
		$( target_accordion ).find('.x-accordion-body').addClass('in').css('height', 'auto');
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[LumosParticipant]

Hello Theme.co,

I tried replacing the previous code with the new code but it unfortunately did not work. It will scroll to the section but not open up the accordion. It works, coming from a different page, but not the same one.

http://suaspilots.org/knowledge-center/14-cfr-part-107-knowledge-center/

[LelyModerator]

Hi Lumos,

Since it’s on the same page, and it will not reload the page, please use this:

jQuery( function($) {
	$('div#nav_menu-2 .sub-menu .sub-menu li a').on('click', function( e ) {
		e.preventDefault();
		e.stopPropagation();
		if ( $( '#' + $(this).attr('href').split("#").slice(-1)[0] ).length > 0 ) {
			$( '#' + $(this).attr('href').split("#").slice(-1)[0] ).find('.x-accordion-toggle').trigger('click');
		} else {
			window.location = $(this).attr('href');
		}
	});
});    

You may want to share your credentials if you still have issues after this.

[LumosParticipant]

Awesome! It worked. Thanks 🙂

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts