Accordion widget is not working on filter nav

Question

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.

Answer 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