3

I am facing an issue on a website that sometimes in product detail page description, more information tabs are not working and it will generate an error in console.

Here is the 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 appreciated.

Thanks in advance. :)

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
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?
    – Divyarajsinh Dodiya
    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
    – Manish Chaubey
    Jan 3, 2020 at 18:13
  • what file is this
    – jibin george
    Jul 27, 2020 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.