Can't close accordion after update from 2.3.1 to 2.3.5-p1
-
14-04-2021 - |
Frage
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
Lösung
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.