手风琴在产品选项卡下的 Magento2 中不起作用

Question

I am using a simple HTML+JS accordion in magento2.2.5 on the product page under a product tab named "FAQ's". I want to show the concept of accordion for the Faq section. But in Magento when I am using the below code it will conflict with the product tabs and they will stop working. They will not be clickable more. Please help me to resolve the issue for accordion. For the time I have removed the below code from tab from Magento admin section, here is the website URL: https://uniqaya.com/staging/tinted-sunscreen.html Code:

 require([ 'jquery' ], function ($) { 'use strict'; $("#element").accordion(); });

 <div id="element" class="collapsibleContainer"> <div class="collapsibleTab" data-role="collapsible"> <div data-role="trigger"> <span>Title 1</span> </div> </div> <div class="collapsibleContent" data-role="content">Content 1</div> <div class="collapsibleTab" data-role="collapsible"> <div data-role="trigger"> <span>Title 2</span> </div> </div> <div class="collapsibleContent" data-role="content">Content 2</div> <div class="collapsibleTab" data-role="collapsible"> <div data-role="trigger"> <span>Title 3</span> </div> </div> <div class="collapsibleContent" data-role="content">Content 3<br>Hello<br>World</div> </div>

Please help how I can use the same code in FAQ's tab as accordion works.

Regrads,

Answer 1

If ID of element is unique, try add accordion to require

require([
  'jquery',
  'accordion'
], function ($) {
   $("#element").accordion();
});

Answer 2

I had the same problem so you can be 100% sure this works.

When adding Accordion into tab on product page you need to change the collapsible data-role arguments so the Tabs widget could work correctly:) Add options from Tabs widget since Accordion instantiates from Tab widget method _instantiateCollapsible :

require([
    'jquery',
    'accordion'
], function ($) {
    $("#element").accordion({
        active: [], //optional - option from accordion
        collapsible: true, //optional - option from accordion
        collapsibleElement: "[data-role=collapsible2]", // - option from tabs
        content: "[data-role=content2]", // - option from tabs
        trigger: "[data-role=trigger2]" // - option from tabs
    });
});

and then change your HTML to:

...
<div class="collapsibleTab" data-role="collapsible2">
  <div data-role="trigger2">
    <span>Title 1</span>
  </div>
</div>
<div class="collapsibleContent" data-role="content2">Content 1</div>
...

You could check other options here:

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_tabs.html