HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How To Transition a Height of Zero to a Height of Auto?

in CSS
Reading Time: 2 mins read
385 16
0
How to transition a height of zero to a height of Auto
552
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

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.

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Apply CSS to Half of a Character

How To Set Cellpadding and Cellspacing Using CSS

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.

Share221Tweet138Share55

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.