How to transition a height of zero to a height of Auto
By Categories: CSS2.8 min read

In this tutorial, I will show you a workaround to achieve this using CSS.

Here on my document are some texts to use in this demo.

What we are going to do is to create a Text question which when we hover over it, will show the rest of the texts or, let’s simply call it the answer.

To start, let’s create a dev with a class of FAQ. This will hold each question-and-answer group of texts.

<div class="faq">
    <h2 class="question">What is the main goal of the James Webb Space Telescope?</h2>
    <div class="answer">
    One of the main goals of the James Webb Space Telescope is to study the formation and evolution of galaxies, stars, and planetary systems in the universe. It will also be able to observe and characterize exoplanets, which are planets that orbit stars outside of our own solar system, and search for signs of life on those planets.
    </div>
</div>

<div class="faq">
    <h2 class="question">What are the long-lasting rovers on Mars?</h2>
    <div class="answer">
    The Spirit and Opportunity rovers were sent to Mars as part of the Mars Exploration Rover (MER) mission and have been operational on the planet's surface for extended periods of time. Spirit landed on Mars in January 2004 and operated for more than six years, while Opportunity landed in January 2004 and has been active for over 14 years. Both rovers have made significant scientific discoveries, including the discovery of water on Mars, and have exceeded their expected lifetimes.
    </div>
</div>

Inside, create an h2 element with a class of question. Let’s copy the question here.
Then below this element, add a div with a class of answer. This will hold the answer text.

I will copy and paste and update it for the second FAQ group.

Now, for our CSS, let’s start by updating the H2 margin.

Set the faq element cursor to pointer.

For the div answer element, add a max height of zero. Set overflow to hidden to hide the content. Let’s also add a background color.

Next, let’s add a style for when the user hovers over the FAQ element, and update the maximum height of the answer element to 300 pixels or higher.

Add padding. Add an overflow auto so you can scroll down and see it fully if you have longer content.

Finally, let’s add a transition to the base answer element.

h2 {
    margin: 5px 0 15px;
}
.faq{
    cursor: pointer;
}
.faq .answer{
    max-height: 0;
    overflow: hidden;
    background: #ffece8;
    transition: max-height .1s ease-out, opacity .1s linear;
    opacity: 0;
}

.faq:hover .answer {
    max-height: 300px;
    overflow: auto;
    padding: 15px;
    transition: max-height .3s ease-in, opacity .3s linear;
    opacity: 1;
}

 

The “transition” property is applied to the “max-height” property, which specifies the maximum height of an element. The transition duration is .1 seconds, and the timing function is “ease-out”, meaning the transition will start slowly and then speed up as it progresses.

Let’s also add a transition for the hover element.
The transition duration is .3 seconds, and the timing function is “ease-in”, meaning the transition will start quickly and then slow down as it progresses.

Let’s add more transition using the opacity property.
Set the opacity to 0 and opacity to 1 on the hover element.

Update the transition to both elements accordingly.

Leave A Comment