0

I am on Magento 2.2 and trying to use the accordion widget as below:

http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_accordion.html

<dl class="filter-options" id="narrow-by-list">
    <dt role="heading" aria-level="3" class="filter-options-title">Base Material</dt>
    <dd class="filter-options-content">
        <ol class="items">
            <li class="item">
                <a href="http://shop.mz-at.de.orange.imi.local/products/base_material-polyester.html">
                    Polyester <span class="count">1<span class="filter-count-label">
                             item</span></span>
                </a>
            </li>
            <li class="item">
                <a href="http://shop.mz-at.de.orange.imi.local/products/base_material-styroldivinylbenzol.html">
                    Styroldivinylbenzol <span class="count">6<span class="filter-count-label">
                             items</span></span>
                </a>
            </li>
        </ol>
    </dd>
    <dt role="heading" aria-level="3" class="filter-options-title">Bed Mass [mg]</dt>
    <dd class="filter-options-content">
        <div class="range-attribute-filter clearfix">
            <div id="slider-bed_mass_in_mg-range"></div>
            <div class="bed_mass_in_mg-range range">
                <div class="">
                    <input id="bed_mass_in_mg-from" name="bed_mass_in_mg-from"> -
                    <input id="bed_mass_in_mg-to" name="bed_mass_in_mg-to"></div>
            </div>
        </div>

        <script type="text/x-magento-init">
{ "*": { "niksSlider": {
    "urlTemplate": "http://shop.mz-at.de.orange.imi.local/products/bed_mass_in_mg-{{from}}_{{to}}.html",
    "code": "bed_mass_in_mg",
    "min": 0,
    "max": 0,
    "from": 0,
    "to": 0} } }

        </script>
    </dd>
</dl>

Initialization:

<script type="text/x-magento-init">
    {
        "#narrow-by-list": {
            "accordion": {
                "header": "dt",
                "content": "dd",
                "trigger": "dt"
            }
        }
    }
</script>

But just nothing seems to happen - no Javascript errors in console.

1

The initialization has to happen like this: header was the wrong array key - collapsible element is to be the "dt"

<script type="text/x-magento-init">
    {
    "#narrow-by-list": {
        "accordion": {
            "collapsibleElement" : "dt",
            "content": "dd",
            "trigger": "dt"
        }
    }
    }
</script>

The example on the devdocs makes more sense with knowing those default settings:

https://github.com/magento/magento2/blob/2.2-develop/lib/web/mage/tabs.js#L20

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.