Docs

[Kalle Johansson]

Unfortunately, this js seems to cause ANY accordion to open, regardless of whether class=”open-accordion-btn” is included in the html or not. For instance, the address http://klimatriksdagen.se/#skriv-pa refers to a Section with a 3-item accordion. Just entering the URL http://klimatriksdagen.se/#skriv-pa in the browser address field causes all 3 accordion items to pop open. How can I limit this behaviour to instances where the class “open-accordion-btn” has been specified?

[Rad]

Hi there,

It’s a bit tricky since open-accordion-btn is a button’s class and not accordion class. Which means, your accordion has no identification at all. Please try this

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

But this means the button should exist on same page where the accordion is. That’s because the only one that links address bar HASH to the accordion is button’s href.

Thanks.

[Kalle Johansson]

I’m sorry, the linking should be enabled from any page.

I’m not quite sure we’re talking about he same thing though.

What I want to achieve is this:
• in some cases, when I say so, an accordion item should pop open when linked to (regardless of from which location).
• in other cases, when I say otherwise, the accordion item should stay closed when linked to.
• linking to an entire section, containing an accordion (such as http://klimatriksdagen.se/#skriv-pa), should not affect the state of the accordion items at any time.

Can this be achieved?

-Note: I have now inactivated the js as it became confusing. Please tell me if you want me to turn it back on.

[Rad]

Hi there,

Since accordion has no specific identification to link to, then it’s not possible. All accordion regardless of page will be affected.

Thanks.

[Kalle Johansson]

I have tried to circumvent this problem by only using one accordion item per accordion and instead stacking separate accordions on top of each other as though they were items in the same accordion. That works, but there is still one snag. Links from inside one accordion to another accordion do not pop the destination accordion open.

Can that be achieved within this scheme?

[Rue Nel]

Hello There,

Thanks for updating in!
Links from inside one accordion to another accordion do not pop the destination accordion open

Could you please point the exact url where we can find this link so that we can take a closer look? There might just be an incorrect link or tag.

Thank you in advance.

[Kalle Johansson]

It is the page http://klimatriksdagen.se/motioner .

If you enter the URL http://klimatriksdagen.se/motioner/#skrivamotion, the accordion item with ID #skrivamotion will pop open. But if you now click the link “motionsformulär” in the text there, the accordion item with ID #motionsformular will not open, although the browser will navigate to that accordion.

In contrast, entering http://klimatriksdagen.se/motioner/#motionsformular in the browser URL field will cause the accordion to pop open.

Thus it seems that it is the location of the link inside an accordion item that prevents the correct behaviour of the linked-to accordion item.

[Rad]

Hi there,

Ah, that’s because there are no bindings and it’s just a simple link with no integration to other accordions. Let’s do this, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

$('.link_to_accordion').on('click', function() {

$( '#' + $(this).attr('href').split("#").slice(-1)[0] ).find('.x-accordion-toggle').trigger('click');

} );

} );

Then add link_to_accordion to the link’s class attribute. Example,

<a href="http://klimatriksdagen.se/motioner/#bkgd" class="link_to_accordion">Inspiration och bakgrund</a>

Hope this helps.

[Kalle Johansson]

Works great! Thank you. The only thing that still remains is when I link from the footer to http://klimatriksdagen.se/om/#foreningen-styrelsen when I am already at the page http://klimatriksdagen.se/om. Then the accordion still won’t open. But if I am at any other page and I click the footer link, it opens OK.

[Rue Nel]

Hello There,

Thanks for updating in! Please have the JS code updated and make use of this code:

jQuery( function($) {
  $('.link_to_accordion').on('click', function() {
  	var accordion = $(this).attr('href').split("#").slice(-1)[0];
  	if ( accordion !== '' ){
      $( '#' + accordion + '' ).find('.x-accordion-toggle').trigger('click');
    }
  });
});

Please let us know if this works out for you.

[Kalle Johansson]

Thank you, but sorry, it doesn’t work. Strangely, in the Customizer preview, the accordion pops open after a long delay. But on a regular page, nothing happens.

[Rad]

Hi there,

It will never work, your accordion ID is foreningen-styrelsen but your footer link is #accordion-foreningen-styrelsen.

They should match and you may change the code to this

jQuery( function($) {

$('.link_to_accordion').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');
    }

} );

} );

Thanks!

[Kalle Johansson]

Hi,

You managed to look into my page att the very short moment that I had this erroneous code. The observations above were made with /#foreningen-styrelsen as link.

Your new JS works with the same exception as before – the footer link does not open the accordion when the browser already is at the page with the destination accordion.

[Rad]

Hi there,

Please remove this

 $('.open-accordion-btn').click(function(){ 
           var target_tab =  $(this).attr('href').split("#").slice(-1)[0];
           $( '#'+target_tab  +' .x-accordion-heading>a').click();
		});

It causes javascript error, your accordion (not the button) has this open-accordion-btn which means it’s clicking itself.

Thanks.

[Kalle Johansson]

Finally!! Thank you very much. Now it works in all cases that I can see. Great!

[Author]

Posts