Open Accordion from different page Pro 2.0.4

[RAMInc]

Hi there,

A year or two ago I was provided with some script to open An accordion from a different page.

// =================================
// Start Open FAQ Accordion from link on Home Page
// =================================

var target_hash = window.location.hash;

var id_index_table = {
"#faql1-1" : 1,
"#faql1-2" : 2,
"#faql1-3" : 3,
"#faql1-4" : 4,
"#faql1-5" : 5,
"#faql1-6" : 6,
"#faql2-1" : 7,
"#faql2-2" : 8,
"#faql2-3" : 9,
"#faql2-4" : 10,
"#faql2-5" : 11,
};

$(document).ready( function() {

var target_index = id_index_table[ target_hash ];

if ( target_hash !== "" && target_index > 0) {

$( $( "a.x-accordion-toggle" ).get( target_index - 1 ) ).click();

 $("html,body").stop().animate({scrollTop: $( $( "a.x-accordion-toggle" ).get( target_index - 1 ) ).offset().top - ( $(".x-navbar").height() - 43 )},700 ,"swing");

}

} );

} );
// =================================
// End Open FAQ Accordion from link on Home Page
// =================================

This worked fine until the update to Pro 2.0.4 or maybe a couple of versions earlier. I have found other code from two separate topics

Open Accordion From Different Page

Open accordion with button click

And have tried these on the site. I have placed this in the Global JS and none have any effect. I have two Accordions on my FAQs page, which I am attempting to link from my home page. All plugins are up to date as is WordPress. PHP Ver 7.2xxx and all suggestions re memory settings etc are in place.

I do appreciate this may be NOW outside the scope of support, however, due to previous help and support by Apex I am hoping whatever it is I am doing wrong can be pointed out to me. I would be good to know if the solution may work with later versions of Pro as well.

It does seem this is a reasonably well asked after feature. Perhaps it could be added to the feature request list for future one-click implementation.

Details for login are in separate hidden message…

Rick M
NZ

[ruenel]

Hello There,

There is a jQuery error on the page. You may need to update the code and use this instead:

// =================================
// Start Open FAQ Accordion from link on Home Page
// =================================

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

	var id_index_table = {
		"#faql1-1" : 1,
		"#faql1-2" : 2,
		"#faql1-3" : 3,
		"#faql1-4" : 4,
		"#faql1-5" : 5,
		"#faql1-6" : 6,
		"#faql2-1" : 7,
		"#faql2-2" : 8,
		"#faql2-3" : 9,
		"#faql2-4" : 10,
		"#faql2-5" : 11
	};

	$(document).ready( function() {

		var target_index = id_index_table[ target_hash ];

		if ( target_hash !== "" && target_index > 0) {

			$( $( "a.x-accordion-toggle" ).get( target_index - 1 ) ).click();

	 		$("html,body").stop().animate({scrollTop: $( $( "a.x-accordion-toggle" ).get( target_index - 1 ) ).offset().top - ( $(".x-navbar").height() - 43 )},700 ,"swing");

		}
	});
})(jQuery);
// =================================
// End Open FAQ Accordion from link on Home Page
// =================================

Please let us know if this works out for you.

[RAMInc]

@RueNel

Thanks for the rapid response.

Tried the above code, it did not seem to work.

Made a discovery. It works with generic Header, not customised Header. You can see this at the dev URL…

Interesting, me thinks…

CHeers

RickM
NZ

[ruenel]

Hello There,

The code will only work for links that point to the accordion such as this link: http://example.com/faqs/#faql2-2
It will not work if you are using the menu links. You will need to create a custom menu link and link it manually to point to each individual accordion items.

By the way, I do not see any menu in your header: http://prntscr.com/jn3a5k

Hope this helps.

[RAMInc]

@RueNel

Again Thanks for your speedy response. I am actually using this from the Home page http://dev.bell-lodge.nz and down towards the bottom of the page there is a series of questions ‘FAQs’ that link to the accordions for the answers. You may of missed these as the link colours are not great… I will try to fix that. Quick fix shows the questions but no Hover colour change.

They are constructed like this…

[icon_list "] <a style="color:rgb(18,33,48)" href="//dev.bell-lodge.nz/faqs/#faql1-4">[icon_list_item type="question"]What is a 'Working Hostel?[/icon_list_item] </a>

Hope this helps…

Cheers

RickM
NZ

[RAMInc]

@RueNel

Forgive me, please!!! It works all of a sudden?? Scratching head and all??? As it works in the dev environment, not on the live site https://bell-lodge.nz

Weird!!!

RickM
NZ

[christopher]

Glad that you have managed to fix the issue. This must be a cache related problem, Try to clear your browser or Wordpress cache if you have a cache plugin.

Thank you.