Smooth “Hovering” Dynamic Height Transition with JavaScript and CSS
Hi, dear reader! Today I will show you how you can make a cool-looking height transition for your next web application using JavaScript and CSS.
The Idea
One cool thing about being a programmer (within the many there are!) is that you are free to build your own applications from scratch and experiment with different tools. By doing so, you can learn and develop not-so-basic features of websites that one usually glazes over and does not realize how do they actually work and the effort required to implement them.
The idea of an expandable container element on hover came up to me upon building my own personal website when I decided to create a dynamic container that was able to, at first glance, hide details but once hovering over it to dynamically expand and show the extra content, similar to the mocks below.
Besides the functional requirements of show/hide on hovering, I also wanted it to have a nice-looking effect. Now that we have a concrete idea, let’s jump to the implementation details!
Hover Animation
Hovering is defined by the user action of “floating”/”moving the mouse over” across a component. CSS offers a pseudo-class hover that is triggered when a user hovers an element with the cursor which seems like a perfect resource for our problem however the height of the elements is not the same (different text lengths will directly affect the element’s height) and CSS does not offer a way to dynamically calculate the height of the element whose animation was triggered (height: 0 -> autodoes not trigger the transition) so we need to recur to JavaScript for a bit of extra help here. The steps can be summarized as follows:
- [CSS] Define the height transition.
- [JavaScript] Calculate the height of the hovered element.
- [JavaScript] Trigger the transition by directly updating the element’s height.
The following code snippet presents the height-specific transition CSS code for the details container.
It is important to note both the transition attribute which targets the height property and the overflow: hidden instruction for the section to be hidden and to prevent the text to be written-on-top of the next available elements when the container is collapsed.
Now that we have the CSS code in-place, let’s check the JavaScript implementation and how it is able to trigger the height transition with appropriate value.
The logic here is to first get all the existing container elements that shall be a target of the transition through its class name and then, for each one of them, add listeners for both mouseenter and mouseleave events as we want the container details components to react and expand or collapse on hover.
The event listeners, upon hovering of the element, will invoke the hoverHandler function which verifies if the current element’s height (clientHeight) is 0 — hidden — otherwise assign its appropriate height value (scrollHeight) by directly setting the style.height property value and hence expanding it as it is a target of a CSS transition.
Final Result
The CodePen below presents the final implementation of this idea and how it smoothly expands and collapses the container’s height.
Extensibility
This solution can be easily expanded to other frameworks, such as React, as presented below. Note the usage of both the onMouseEnter and onMouseLeave props for the event listeners setup on the <div> container.
Note that the CSS code needs to be included in the application for it to work.
Conclusion
Hope this article was useful and that you can now include it in your next front-end project. Please see the references for more details and credits to the respective authors on the different concepts used across this article. See you next time! :)
