I dont really understand what this question is asking for

Question

Write a declaration that will transition only the height value of .collapsed.

style.css

/* Complete the challenge by writing CSS below */

.collapsed:hover {
    height: 0;
    overflow: hidden;
}

.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 · 2020-11-12T17:14:16Z

November 12, 2020 5:14pm

Hi

The challenge requires you to add the property transition with the value of height to the .collapsed selector, so it would look like the below.

transition:height;

Welcome to the Treehouse Community

Looking to learn something new?

Jacob Pacheco

Jacob Pacheco

I dont really understand what this question is asking for

1 Answer

Martin Sole

Martin Sole