Hide upwards

by Dini Mer

HTML

<div class="fixed">
<div class="up">
<div class="red">test</div>
</div>
<div class="yellow">test</div>
</div>

CSS

*,*:before,*:after {
box-sizing: border-box;
}

.fixed {
position: fixed;
top: 2em;
left: 0;
right: 0;
background-color: green;
font-size: 20px;
}

.fixed .up {
overflow: hidden;
max-height: 50px;
transition: all 1s ease-in-out 0s;
}

.fixed .red {
margin-top: 0px;
padding: 5px 0;
background-color: red;
text-align: center;
transition: all 1s ease-in-out 0s;
}

.fixed .yellow {
padding: 5px 0;
background-color: yellow;
text-align: center;
}

.fixed.hide .up {
max-height: 0;
}

.fixed.hide .red {
margin-top: -50px;
}

JavaScript

$('.fixed').on('click', function(e) {
$(this).toggleClass('hide');
e.preventDefault();
});