1

tl;dr After upgrading from Magento 2.3.1 to Magento 2.3.5-p1 our custom JavaScript, part of our custom theme, stopped working. I'm receiving the following error when trying to close the accordion using the Magento Accordion widget like so: $('#accordion').accordion('deactivate');

jquery.js:2 Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'deactivate'

Full error


I'm using the native Magento Accordion Widget in my custom theme. The file contains a single #accordion, with a #readmore and #readless button. Both are loaded into the DOM, however, the #readless button has the default styling: display: none

Block code

<div class="homepage-block">
<div id="accordion" class="fade-active" data-mage-init="{&quot;accordion&quot;:{&quot;openedState&quot;: &quot;active&quot;, &quot;collapsible&quot;: true, &quot;active&quot;: false, &quot;multipleCollapsible&quot;: true}}">
    <div class="row">
            <p>Lorum Ipsum</p>
    </div>
    <div class="col2-set">
        <div id="readmorecontainer">
            <div id="readmore" data-role="collapsible">Read More...</div>
        </div>
        <div data-role="content">
            <div class="col-1">
                <p>Lorum Ipsum</p>
            </div>
            <div class="col-2">
                <p>Lorum Ipsum</p>
            </div>
            <div id="readlesscontainer" class="col-1">
                <div id="readless">Read Less...</div>
            </div>
        </div>
    </div>
</div>

Javascript code

The JS code has always worked, the functionality is as follows:

  • On #readmore click

    • Toggle the #readless button
    • Toggle fade-active class (Pure styling, used as kind of overlay)
  • On #readless click

   require([
        'jquery'
        ], function($) {
        'use strict';
    
        $(function() {
    
            // Accordion readmore
            $("#readmore").on("click", function () {
                $('#readmore').hide();
                $('#accordion').toggleClass('fade-active');
            });
    
            // Accordion readless
            $('#readless').on('click', function () {
                $('#readmore').show();
                $('#accordion').accordion('deactivate');
                $('#accordion').toggleClass('fade-active');
            });
        });
    });

The issue

After the update the block, pressing the #readless button triggers the error. I guess the accordion function changed, or my JavaSript file isn't loaded in the correct order.

Any advice is welcome

0

After trying lots of different solutions I've finally managed to fix the problem.

In the JS code I simply had to add 'jquery/ui' to the require.

 require([
    'jquery',
    'jquery/ui'
    ], function($) {
    'use strict';
    ...

After adding this to the JS and deploying the static content the deactivate method works for the accordion.

I have no idea why this problem only occured after upgrading to Magento 2.3.5-p1.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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