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?

A post was merged into an existing topic: WikiViewer Problems

You have a couple of syntax issues that are throwing your logic off.
First of all, in the jQuery version, when you write the following, it will always evaluate to true, because "#header.height = 80%’ is a string and since if statements expect a Boolean value at evaluation time, strings are “truthy” in value, so they evaluate to true.

if ('#header.height = 80%') {

I think what you were meaning was the following. However, the jQuery height function returns a number like 400.5 which represents the height in pixels. But since 80% is really just 0.80, a number like 400.5 will not help you compare much here. Now if you were to use the height value and calculate a percentage, then you could compare it to 80% (while being careful to account for floating point rounding errors in your percentage calculation).

if ($('#header').height() === 80%) {

Resolve this logic issue first, then try to figure out how best to animate. I believe in the end, you will want to animate both the height of the div with class=“content” and the div with id=“header”. Not sure how to do that, because I have not studied up enough on using CSS Grid Layout.

1 Like

Something like:

var headerHeightPecrent = $('#header').height() / $(document).height();
    if (headerHeightPecrent === 0.75) {

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: