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

Question

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

  • Toggle #readmore button
  • Hide accordion using Magento's .accordion('deactivate') function.

   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

Answer 1

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.