How can set transition of height property

Question

I set the transition duration but it is not going through where am I wrong . Any suggestions please

style.css

/* Complete the challenge by writing CSS below */

.collapsed {
    height: 0;
    overflow: hidden;
  transition-duration: .2s;
}

.expand:checked ~ .collapsed {
    height: 34vh;

}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container clearfix">

        <input type="checkbox" class="expand" id="expand"><label for="expand">Expand Height</label>

        <div class="collapsed">
            <h2>Chocolate cupcake dessert</h2>
            <p> Tiramisu apple pie sesame snaps lemon drops pie bonbon wafer sweet jujubes. Toffee cupcake wafer. Dessert jelly ice cream sweet roll chocolate bar toffee oat cake cotton candy sweet roll. Cotton candy sweet oat cake croissant macaroon gummies cake gummi bears bear claw. Tootsie roll biscuit marshmallow topping.</p>
        </div>

    </div>
</body>
</html>

Answer 1 · 2017-12-13T11:09:44Z

December 13, 2017 11:09am

Hi,

you need to call the transition property with the name of the attribute you want the transition to apply and the duration : transition: height .2s

Welcome to the Treehouse Community

Looking to learn something new?

Abdullahi Abdinasir Ali

Abdullahi Abdinasir Ali

How can set transition of height property

1 Answer

Romain Gaget

Romain Gaget