Paul Paul - 1 month ago 13
CSS Question

How to make child span collapse with parent

I am teaching myself about animations using simple rectangles and I have so far managed a bit of progress with this simple project:

html:

<!DOCTYPE html>
<html>
<head>
<title>test slider</title>

<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<span class="rect">
<span class="otherrect"></span>
</span>
<p id="button"> click here </p>
</body>
</html>


css

.rect{
float: left;
height: 400px;
width: 550px;
background-color: blue;

transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}

.otherrect {
float: left;
height: 200px;
width: 250px;
background-color: red;
}

.closed {
height: 0;
background-color: white;
}

#button {
float: right;
margin-top: 200px;
margin-right: 500px;
}


js

$(document).ready(function(){

$("#button").click(function(){

if ($( ".rect" ).hasClass( "closed" )){

$(".rect").removeClass("closed");

} else {

$(".rect").addClass("closed");
}

});
});


And it looks like this:

enter image description here

So, what I was aiming at, was that the red rectangle (class: otherrect) should also collapse and fade like its parent rectangle. How can I do this without using javascript and preferably not having to use the display property. Thanks for your time. P

---------------------------------EDIT AFTER RECEIVING ANSWERS-----------------------------------

Thank you all for your answers. These are all good in one way or another, but I guess I sould have mentioned that the red rectangle is going to be a video in the finished project so I need it to be a child of the other element because if the class that collapses it is applied to it directly, it affects the way it looks. Please refer to this other question to see a gif of what I mean:
slideDown() function behaving oddly

Answer

Change your span class or add one like this :

    <span class="rect">
        <span class="otherrect rect"></span>
    </span>