TransWikia.com

Can't close accordion after update from 2.3.1 to 2.3.5-p1

Magento Asked by Watista on November 23, 2020

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

One Answer

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.

Correct answer by Watista on November 23, 2020

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