toggle search filers display

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -595,9 +595,30 @@ header[role="banner"]{
         color:#666;
       }
 
-			#edit-filters{
+			fieldset#edit-filters{
 				grid-row: 2 / 2;
 				grid-column: 1 / span 2;
+				border: none;
+				padding: 0;
+				>legend{
+					line-height: 0.6;
+					padding-bottom: 0.2em;
+					width: 100%;
+					text-align: right;
+					span{
+						cursor: pointer;
+						font-size: 0.756em;
+						color: #8f8f8f;
+					}
+				}
+				> div.fieldset-wrapper{
+					height: 0;
+					overflow: hidden;
+				}
+				&.open >div.fieldset-wrapper{
+					height: auto;
+					overflow: visible;
+				}
 				.ss-main{
 					font-size: 0.756em;
 					.ss-single-selected{

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -71,6 +71,11 @@ export default {
     onSelectFiltersChange(index, info){
       console.log('onSelectFiltersChange', index, info, this.filters)
       this.slimFilters[index] = info.value
+    },
+    onClickFilters(e){
+      console.log('onClickFilters legend', e)
+      e.target.closest('fieldset').classList.toggle('open')
+      // TODO: reset the filters oon close
     }
   },
   directives: {