With a small css trick we can animate the opening and collapsing of the category filter.
With dynamic content it is very hard to animate height. Instead I animated the grid-template-row parameter which can be animated perfectly. I also animated the toggle switch (I hided the expanded svg permanently and rotated the other one when the panel is opened.)
%root% .filter-item .filter {
grid-template-rows: 0fr;
transition: all 0.3s ease;
display: grid !important;
}
%root% .filter-item.open .filter {
grid-template-rows: 1fr;
}
%root% .filter-item .filter ul {
overflow: hidden;
}
%root% %root% .filter-item .filter {
grid-template-rows: 0fr;
transition: all 0.3s ease;
display: grid !important;
}
%root% .filter-item.open .filter {
grid-template-rows: 1fr;
}
%root% .filter-item .toggle {
transition: all 0.3s ease;
display: block !important;
}
%root% .filter-item.open .toggle {
transition: all 0.3s ease;
transform: rotateX(180deg);
}
%root% .filter-item .toggle.expanded {
display: none !important;
}