I am aware of the built in Magento accordion but do not want to use it. I want to use jQuery accordion. In my theme web/js/custom.js I have the following

define([ "jquery", 'accordion', ], function($, accordion) { "use strict";


The code is called, but it does not work. When I say does not work, I mean the accordion is not enabled on the page.

In the javascript console I can copy and paste the same line of code, jQuery('.accordion').accordion(); and it works perfectly. I believe something in core Magento is blocking the jQuery accordion when the page is loading/ready.

I also added logging statements like console.log($('.accordion').html()) and it prints the html - the exact same html that is present when I run the command from the javascript console.

If I add setTimeout() with 1,000 ms then it creates the accordion correctly.

What the heck is going on here? How can I debug what is causing this behavior? There isn't much more frustrating than an error that doesn't appear to make sense.

2 Answers 2


Try This code, I am using accordion in the mobile footer with this code. You can update width according to your requirement.

jQuery(document).ready(function() {
            if (jQuery(window).width() < 768) { 
                jQuery(".footer-block-title").click(function() { 
  • Your code isn't really different than mine.
    – Kyle Waid
    Commented Jul 24, 2020 at 19:55
  • but it's working my side perfectly Commented Jul 27, 2020 at 4:46

I figured it out. I found the usage of 'accordion' in requirejs from another article, but it seems to not work. I found jquery-ui-modules/accordion instead and it works perfectly. It was difficult to find this information/reference and which library could be used instead of just using jquery-ui in requirejs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.