All solutions

Question: Is there a way to add a transition to an element's height without actually giving it a specific height?

I wanted to add a smooth transition to the accordion elements that are hidden and are shown when you click on the header, but unfortunately I wasn't able to add that sort of animation without giving every div a specific height and with pure CSS and JS.

Here's an example of what I tried but didn't work:

.item-body {
height: 0;
transition: height 2s;
}

.visible {
height: 100%;
}

(Don't know how but bootstrap 5 does have that animation in its accordions). The reason why I don't wanna set a specific height is because some elements have different heights and I only used one class. I hope someone can help me with that :)

And aside from that, any recomendations regarding to writing JS code would be very much appreciated, it's the second challenge I complete using JS so I'm new to this.

I have no questions, except for, do you have any accessibility recommendations?

• How would you vertically center the card in the page across all breakpoints?

A way I can think of is to create a container with the total height of the viewport and use flex or position. Though I'd have to use some media queries.

• Could you please share with me the screen sizes you take into account when programming (width and height)?

I have my own breakpoints, but I'd like to see other people's as well.

Thanks in advance :D