Magento 2 Product detail page tab not working

Question

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.

Any help will appreciate.

Thanks in advance. :)

Answer 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