Accordion items opened on click

HI there, I have a menu in home page with items linked to an accordion in a different page.

Some time ago you have provided to me a script to manage this thing, this:

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

After recent updates (one week ago), the accordion doesn’t open anymore when click on menu items.

Can you help me solve this issue?

Thanks so much

Hello Allesandro,

After doing the updates and site changes, always remember to clear all caches (if you are using WP Rocket, WP Fastest Cache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Hi there, I have purged all the caches and also try to disable cache plugin, but the script doesn’t work.

Access in secure note, thanks

Another thing, after latest update, if I clear all caches or I navigate site on private browsing I see a Chrome console message that say the “X is running without cornerstone”. But cornerstone is installed and active!
In fact the background image is disappeared.

Thanks

Hello Allesandro,

I have checked your homepage and none of the menu links is using #accordion-item. The correct linked that can be pick up by the JS code above should be like this one: http://example.com/page-slug#accordion-item. What you have in your homepage menu are just plain menu links.

Hope this makes sense.

Hi there, thank for your message.

The links I’m referring to are these:

They are in the format https://website.com/page-slug#accordion-item. What I’ve noticed is that the page slug is wrong. Because the page that contains the accordion has slug “attivita”.

I have tried to correct this on the first element just to see if the issue was disappeared, but no, the accordion doesn’t open again. It doesn’t work.

Can you check, please? Thanks so much

Hello Allesandro,

Your JS code is not working because of a JS error:

Uncaught TypeError: $ is not a function
    at (index):579

After further inspection shows that this is by this JS code:

<!-- bxSlider Javascript file -->
  <script>
    $(document).ready(function(){
      // code highlighter
      hljs.initHighlightingOnLoad();
    });
  </script>

Please remove or at least fix the code to resolve the issue.

Please be advised that custom coding is beyond the scope of our support. You may need to contact the creator of the script for further assistance.

Regards.

Hi there, thanks for your answer. Yes, I had noticed of that JS error. I can’t figure out of what components this error is related. I see “bxSlider” in a comment. But there’s no bxSlider plugin installed on the website. Do you understand from where this script is coming? I’m investigating, but I can’t find it.

Thanks

Hi, I have set up a site clone to test here https://salvetta.alecsslab.com/
You can access to backend with the same credentials that I have provided in the secure note above.

I have tried to disable all the plugins, but visual composer, slider revolution and cornerstone, but the script doesn’t open the accordion.

Hey Allesandro,

Thank you for setting up the clone site, I went ahead and replaced your code with the following:

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

This seems to have fixed the issue. Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

Hi there, the code works fine. Thank you very much for your help

Hi Allesandro,

You’re welcome and it’s our pleasure to help you. if you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

Hi there, the code works, but in Mozilla Firefox doesn’t work as expected. In some cases the accordion opens, in another cases it opens only if the page is refreshed. Can you check please? Is maybe a problem of cache?

Thank you very much

Hi Allesandro,

Since the custom JS code works properly on the chrome and my colleague already provided you a working code as serves as your guide. Regretfully, enhancing the custom CSS code is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.

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