Link to an open accordion item that is closed by default #2

Support
#1

It seems that an update broke the code you give to mee in this topic https://theme.co/apex/forum/t/link-to-an-open-accordion-item-that-is-closed-by-default/43045

The solution provided no longer works.

1 Like
#2

Hi @philippe,

Thanks for reaching out. It’s likely that the customization we provided in the forums is conflicting with a feature we added in the last major release to allow for this functionality natively. Look for the “Toggle Hash” option on accordion items and any of the other elements that have a toggle. You can find it on the “Customize” tab of the inspector. For example, if you set it to “item1” when you visit the page from /your-page#item1 as the incoming URL it will open that item and scroll to it.

Let us know if this solves it for you!

#3

This is not working. When I try to enter «/your-page#item1» the browser place a slash before the #. For example this is one of the links that should open the MRC accordion: https://lekamouraska.com/offres/nos-employeurs-partenaires-attendent-vos-cv/#MRC

Is this code still needed in Theme Options > JS?

(function($){
  
    if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
     
   
       var navbar = $('.x-navbar').outerHeight();
       var adminbar = $('#wpadminbar').outerHeight();
       
    $('.x-accordion .x-accordion-body').removeClass('in');
    $('.x-accordion>'+hash + ' .x-accordion-toggle').trigger('click');

    setTimeout ( function() { //Let's trigger the scroll animation just after the content is displayed.
   
    var yloc = $(hash).offset().top+navbar+adminbar;

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

   }, 750 );
}
    
    
     });
#4

Hi Philippe,

That should still work with slash or without, it’s based on your permalink configuration so that’s why the slash will be added automatically.

Could you try removing that code and then we’ll continue checking it, the custom code is still there as I can see if from page’s source code?

Thanks!

#5

The code is removed from GLOBAL JS

#6

Hi Philippe,

Please remove all the custom JS code that has something to do with “link to open an accordion item” to avoid JS conflict.

Then just utilize the new feature Toggle Hash mentioned by Alex above. I did check your accordion items, and none has the mrc Toggle Hash assign.



Please assign Toggle Hash instead of ID

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so the changes will take effect immediately

Cheers!

#7

Hi friech. Thank you. I had not understand the alexander answer.

Now the links are opening each accordion only in Safari Mac and the position of the page is not good.

I found that if I let the same text in the Toggle Hash and the ID field, the position is better and this is solving the problem in other browsers

Problem solved!

#8

Glad to hear it’s sorted, Philippe.

#9

Hello! In my case Toggle Hash opens the tab, but don’t scroll the page to the tab’s position. Can you help me with that?

#10

Hi Guys,

It will only trigger the toggle but not the scrolling, and the browser do the scrolling (its default functionality without any code).

Please try the code I provided here https://theme.co/apex/forum/t/link-to-an-accordion-item/46746/4

Except, remove this line since the toggle is already there,

$('#'+hash + '.x-accordion-group .x-accordion-toggle').trigger('click');

Thanks!

1 Like
#11

Write the same thing in the Toggle Hash and the ID field. The anchor link need the ID too.

#12

Hey @Katus23,

You must place the ID first and then use the ID for the Toggle Hash. If they are not the same, it will not work.

Please let us know how it goes.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.