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'
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="{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": 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)
- Toggle the
On
#readless
click- Toggle
#readmore
button - Hide accordion using Magento's
.accordion('deactivate')
function.
- Toggle
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