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

Question

style.css

/* Complete the challenge by writing CSS below */

.collapsed {
    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 · 2016-04-20T07:13:07Z

April 20, 2016 7:13am

transition: height 0.3s ease-out 0s; so: transition: [property or all] [timing] [easing] [delay]

And also you could use adjacent selector, so put "+" instead of "~". See more here: https://css-tricks.com/child-and-sibling-selectors/

Welcome to the Treehouse Community

Looking to learn something new?

Lillie Dahl

Lillie Dahl

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

1 Answer

Bence Husi

Bence Husi

Michael McMillan

Michael McMillan