Magento Question posted in
The official documentation can be found here.

Accordion not working in Magento2 under product tab

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,

Tags:

2

Answers


  1. 0

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

    require([
  'jquery',
  'accordion'
], function ($) {
   $("#element").accordion();
});
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search