Docs

[Kalle Johansson]

Hi,

I can see from the knowledge base that this topic has been covered several times, sort of. But I can’t see how I should apply it to my problem.

In the footer 2 area of http://klimatriksdagen.se/ there is a link

“Kontakta medlemmar i föreningens styrelse”

#foreningen is a section id. Inside that section there is an accordion with the id “foreningen-acc-1” which I want to open when the above link is clicked. The link html should thus be modified to achieve that. I have been looking at the thread https://community.theme.co/forums/topic/open-accordion-from-link/ but I couldn’t adapt the code there such that it works for me.

– Should the javascript be in the Footer 2 widget or in the global custom js?
– How should the link html be worded?

Sorry to make you repeat yourselves, but there is some confusion in the old posts with broken links and stuff.

[Rupok]

Hi there,

Here goes a working example – https://community.theme.co/forums/topic/accordion-external-link/page/2/#post-1018535

Kindly spend some time to implement this properly as it’s not an usual feature rather custom development.

Cheers!

[Kalle Johansson]

I can’t get this to work.

1) Please answer my original question as to _where_ the js should be stored – widget area or global custom js (customize).

2) At the page you linked to, there are two scripts – one by “Rad” and one by “Rue Nel”. Which one should be used?

3) It is not clear to me what the numbers in “#tab-collapse-3-2” refer to, but I guess they indicate accordion #3 and accordion item #2. In that case, my code should refer to http://klimatriksdagen.se/om/#tab-collapse-1-1 since it is the first item in the first (and only) accordion that I want to pop open with the link. Correct?

[Paul R]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Kalle Johansson]

This reply has been marked as private.

[Rahul]

Hey There,

Thanks for writing in!

You can create your own temporary account with any email ID you have. Once done, you can delete it.

Thanks for understanding.

[Kalle Johansson]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please provide the admin privileges so we can take a closer look. There’s an error in your JavaScript Customizer. Please remove the code from your Customizer also.

Thanks!

[Kalle Johansson]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the admin rights. I’ve added the following code in your JS Customizer:

jQuery( function( $ ) {
	$( document ).ready ( function() {
		var target_tab = window.location.hash;
		var accordion = $( target_tab ).find('.x-accordion-body').removeClass('collapse');
	});
});

And I tested for http://klimatriksdagen.se/om/#medlem and it is working fine. Please give your accordions ID’s like you’ve given an ID medlem to your last accordion then above code will take care of what you need.

Don’t forget to clear your browser’s cache and site’s cache. Cheers!

[Kalle Johansson]

OK thanks a lot, that’s working now. Since there is no specific instruction in the link html I guess ANY link to an accordion will make it pop open now, right?

I don’t think that’s a problem, just would like to know…

[Kalle Johansson]

…hold on… funny thing is, when I try to use the footer link when I am already at the page linked to (http://klimatriksdagen.se/om/), the accordion doesn’t open. The view jumps to the accordion but it remains closed. Strange.

Another glitch: if I wish to close the auto-opened accordion by clicking the title, it reacts by re-opening first time. After that, it behaves normally.

[Lely]

Hello There,

The credentials doesn’t have admin right when I tried to login.
To address the issue, please replace the following JS code from Appearance > Customize > Custom > Edit Global Javascript:

jQuery( function( $ ) {
	$( document ).ready ( function() {
		var target_tab = window.location.hash;
		var accordion = $( target_tab ).find('.x-accordion-body').removeClass('collapse');
	});
});

With this:

/*Open Accordion from Link and Button*/
jQuery( function( $ ) {
	$( document ).ready ( function() {
		
    var target_tab = window.location.hash; 
    if(target_tab!=''){
       $( target_tab +' .x-accordion-heading>a').click();
    }
    
    $('.open-accordion-btn').click(function(){ 
           var target_tab =  $(this).attr('href').split("#").slice(-1)[0];
           $( '#'+target_tab  +' .x-accordion-heading>a').click();
		});
    
	 
	});
});

Then please update the link on your html from this:
<a href="http://klimatriksdagen.se/om/#foreningen-styrelsen">medlemmar</a>
To this:
<a href="http://klimatriksdagen.se/om/#foreningen-styrelsen" class="open-accordion-btn">medlemmar</a>

On other pages like home, the JS code will open the accordion via link but on the same page, we should open it using the button click function. It will also remove the GLITCH.

See my test here:http://screencast-o-matic.com/watch/cbVwjeQ9li

Hope this helps.

[Kalle Johansson]

Thank you very much! Now it works!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks. 🙂

[Author]

Posts