CSS trasition - Slide down and up - html

Question

I am trying show/hide div on click, and wanted to use CSS transition, that will be like when clicked on open, it will show a div from top to bottom with sliding effect, and and when close it will slide up from bottom and hide, I attempt to create this using css transition but not working, can anybody suggest?
Here is the JSFiddle demo
$('.showdiv').click(function(){
$(".morphing_search").show();
});
$('.close-btn').click(function(){
$(".morphing_search").hide();
});
body {
background: #fff;
}
.morphing_search {
width: 100%;
height: 500px;
left: 0;
top: 20px;
background: #cdcdcd;
display: none;
transition-property: all;
transition-duration: .1s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.close-btn {
position: absolute;
right: 30px;
top: 10px;
background: #f00;
color: #fff;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a class="showdiv" href="javascript:;">Open box</a>
<div class="morphing_search"> this is the test div </div>
<a class="close-btn" href="javascript:;">X</a>

Answer 1

You can't use display property when using animation/transition in css.
So, what I did is I animate the max-height.
In active state, I exaggerated the value.
$('.showdiv').click(function(){
$(".morphing_search").addClass('active');
});
$('.close-btn').click(function(){
$(".morphing_search").removeClass('active');
});
.morphing_search {
width: 100%;
height: 500px;
left: 0;
top: 20px;
background: #cdcdcd;
max-height: 0;
overflow: hidden;
transition-property: all;
transition-duration: .7s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.morphing_search.active {
max-height: 500px; }
.close-btn {
position: absolute;
right: 30px;
top: 10px;
background: #f00;
color: #fff;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showdiv" href="javascript:;">Open box</a>
<div class="morphing_search"> this is the test div </div>
<a class="close-btn" href="javascript:;">X</a>
Using css. You need to add and remove class.
Hope it helps! Cheers!