TransWikia.com

Magento 2.3 jquery accordion seems blocked

Magento Asked on December 2, 2021

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";

    $(document).ready(function(){
        $(".accordion").accordion();

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

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.

Answered by Kyle Waid on December 2, 2021

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() { 
                    jQuery(this).next(".footer-block-content").toggle();
                    jQuery(this).toggleClass("active-links");
                });                 
            }
    });

Answered by Pushpendra Singh on December 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP