Facet Show/Hide

by default the sections within the facets menu are expanded when the page loads depending on the amount of filters/options, as well as the intention of the ui, it may be desired to have the menu load in an alternative state this guide presents two options default as collapsed (default and/or mobile view) toggle visibility on button click (mobile optimized) default as collapsed by default the facets within the menu are expanded when the page loads depending on the amount of facets as well as the intention of the ui, it may be desired to have each load in a collapsed state the following example reverses the default state so that the filters appear as collapsed a built in conditional check for ismobiledevice() identifies mobile user agents // this variable ensures we only collapse the filters on page load var klevu filters collapsed = false; // change this value to true if you only want to collapse filters on mobile var klevu filters collapsed mobile only = false; klevu aftertemplaterender('landing,catnav', function(data, scope){ if (!klevu filters collapsed && (klevu dom helpers ismobiledevice() || !klevu filters collapsed mobile only)) { // find all filter triggers and click them to collapse them var filterheaders = document queryselectorall(' klevumeta\[data section="productlist"] kufilterhead kucollapse'); if (filterheaders length) { klevu each(filterheaders, function(key, header){ header click(); }); } klevu filters collapsed = true; } }); toggle visibility on button click the responsive nature of the klevu template re positions the facet menu at the top of the product grid as the screen viewport is reduced to a mobile aspect ratio depending on the amount of displayable facets and/or other components of the ui, it is possible the the facet menu would extend beyond the initial page view on a mobile device, even if collapsed in this scenario, hiding the facets from initial view and then revealing them on a button trigger can be a useful modification the following example suppresses the facet menu on a mobile aspect ratio a button is placed at the top of the product grid with a small icon and text triggering the button will toggle the facet menu visibility