3

I have facing one issue some time in a site that in product detail page description, more information tabs are not working and it will generate an error in console.

Here is console log error

jquery.js:253 Uncaught Error: Method forceDeactivate does not exist on jQuery.collapsible
at Function.error (jquery.js:253)
at jQuery.fn.init.jQuery.fn.<computed> [as collapsible] (materialize.min.js:6)
at HTMLDivElement.<anonymous> (tabs.js:179)
at HTMLDivElement.dispatch (jquery.js:5226)
at HTMLDivElement.elemData.handle (jquery.js:4878)
at Object.trigger (jquery.js:5130)
at Object.jQuery.event.trigger (jquery-migrate.js:633)
at HTMLDivElement.<anonymous> (jquery.js:5860)
at Function.each (jquery.js:370)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init.trigger (jquery.js:5859)
at $.<computed>.<computed>._open (collapsible.js:481)
at $.<computed>.<computed>._open (jquery-ui.js:402)
at $.<computed>.<computed>.activate (collapsible.js:464)
at $.<computed>.<computed>.activate (jquery-ui.js:402)
at $.<computed>.<computed>._eventHandler (collapsible.js:358)

forceDeactivate function is call in Magento 2 default tabs.js #177 to #181

        $.each(this.collapsibles, function () {
            $(this).on('beforeOpen', function () {
                self.collapsibles.not(this).collapsible('forceDeactivate');
            });
        });

Please see here how it is functioning now. enter image description here

Any help will appreciate.

Thanks in advance. :)

1 Answer 1

1

Override tabs.js in your theme or module using requirejs and use

$.each(this.collapsibles, function () {
       $(this).on('beforeOpen', function () {
           self.collapsibles.not(this).collapsible("option","active",false);
     });
 });

you can set the collapsible option active attribute to true or false.

for further detail kindly check https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_collapsible.html#fedg_collaps_collapsible

thank you

3
  • Thanks, @manish-chaubey. but the issue in .collapsible is not found. If I override it will still exist. Did you think it will fix? Jan 3, 2020 at 13:23
  • Yes it will be fix. You can also use custom collapsible code like $('#my-collapsible').bind('expand', function () { alert('Expanded'); }).bind('collapse', function () { alert('Collapsed'); }); please check this link jsfiddle.net/6txWy Jan 3, 2020 at 18:13
  • what file is this Jul 27, 2020 at 12:16

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.