Accordian animation using Flexbox vs jQuery

Splitting the discussion from wikiViewer Problems:

I am trying to create

I have nearly managed this in two ways:

One using jQuery & CSS Grid:

The animation is pretty good on this one, (header shrinks and rows expand) but I can’t get the white space from the header to disappear, it seems the header is retaining its original size (75%) even though the style says differently. I am not sure if this is an issue with combining CSS grid with jQueries .animate(). Another issue is any padding applied to the result rows affects the initial layout.

And the other using flexBox !! :

This isn’t as fancy as the jquery version. Issue with this one is the .container has to have a fixed height or it won’t work, 100% doesn’t seem to work either. The results rows are not visible if there is no content and only expand based on content. It may be possible to add jQueries .animate() to the results rows but if results have an unknown height then the .container fixed height is a problem.

Overall, I was suprised flexBox could achieve the animation but found it a bit limiting because of the fixed height, the animation is quite pretty. I really like the animation rendered by jQuery, it’s just that white space in jQuery that is holding me up???!!!???

Thoughts anyone?

When you set up the grid system you gave each of the children a sort of implied parent element, which are the smaller rectangles within the grid. While the header is actually shrinking, its height is changing relative to that implied parent element; you’re not changing the grid system but only changing how header fits into that single grid row. The 75% grid row is still active, and header becomes 25% of that, which is 18.75% of the whole container.

afaik animating the actual grid system has little browser support atm. Although if you animate the container itself, the grid system will adjust accordion-ly.

So what you can do is put the header and footer outside the grid system, then animate the header, footer, and container heights simultaneously. Since they all share the same parent (body/html) it would stand to reason that if their heights added up to 100%, they would fill up the entire page.

Here’s my fork:

2 Likes