Collapse entire table on click with animation - html

Question

I am have a table where I would like to be able to click on the table header row and that will collapse the rest of the table leaving only the header row (and expand back out). With a good deal of struggle I was able to get the table to actually change it's height on click, but haven't been able to get the animation to trigger. Here is the css that I have so far:
table {
height: 100%;
display: block;
overflow: hidden;
}
.collapsed {
animation-name: collapse;
animation-duration: 2s;
}
#keyframes collapse {
from { height: 100%; }
to { height: 40px; }
}
/* This is the javascript that is trigger on click */
this.refs.ruleslisttable.classList.toggle("ruleSetInfo__rule-list-table--collapsed");
The code above doesn't even trigger the new height when I toggle the class on the table, but has been my attempt at getting the animation in there.

Answer 1

You don't really need to do it with keyframe animation.
You could do it just by adding a transition rule to the table element, like this:
table {
height: 100%;
display: block;
overflow: hidden;
transition: height 2s ease-in;
}
.collapsed {
height: 40px;
}
What this does, is tell the browser to transition the height of the table from 100% to 40px and vice cersa over a duration of 2s with an ease-in function
For more info you can read the entry about the transition property at MDN
Cheers
UPDATE:
In your current setup I suppose the parent of the table element does not have a strictly defined height.
The way the percentage based height works is like this: The element gets the 100% of its parent height.
However when you do not specify a height for the parent, be it in px, em, rem, vh or what have you, the child with height: 100% is like having height: auto. Reference
And here is the actual problem: You cannot transition from auto to any other value, like %, px etc.
You can only transition from one defined value (!== auto) to any other defined value. e.g. from px to rem, etc
And this is why your transition is not working.
See this fiddle
I made. Play with the #cont element's height and see what happens.
So, in short: You will either have to give a strict height to your table, or, if you want to keep it percentage based, give a strict height to its parent element.