Collapse Facets by default

[stlads]

We added multiple facets just above the category tree, on the category pages. The facets are working great, but they take up too much space and push the category tree way down the page. Is there a way to collapse available facets by default, so the customer can expand them as needed? It would also be nice if only the facets used by the customer are expanded.

[Matt Zimmermann]

Hi Henry,

If you would like to have the facets collapsed initially, remove the "data-a11y-toggle-open" attribute from the facet set DIV.

[stlads]

Thank you Matt! That worked.

Is there an easy way to expand only the facets used by the customer?

[Matt Zimmermann]

Hi Henry,

Easy, not as such. However, you could determine if a facet is active and then apply the "data-a11y-toggle-open" attribute to the facet set DIV.

[stlads]

Not sure if this is the best way to do this, but I was able to expand active facets by adding this IF statement inside the DIV tag:

<mvt:if expr="l.settings:facet:input_value_count GT 0">data-a11y-toggle-open</mvt:if>

Thanks again for a quick reply and help!

[lesliekirk]

Is there a way to have the Category facet remain open and have the others closed?

This didn't quite do it:

<mvt:if expr="l.settings:facet:code EQ 'catgeory'">
<div id="facet-set__&mvte:facet:code;" class="c-form-list__item x-facet-set__list x-collapsible-content__item" data-a11y-toggle-open>
<mvt:else>
<div id="facet-set__&mvte:facet:code;" class="c-form-list__item x-facet-set__list x-collapsible-content__item">
</mvt:if>

[Matt Zimmermann]

Hi Leslie,

In your facets layout HTML, you should be able to remove the attribute "data-a11y-toggle-open" and have the facets be closed on load.