Make Div Rectangle expand (height) upon button click

Question

I have a div

    <div class="dropdwn"></div>

and i want it to be the full width of the screen, and the bottom of the rectangle to expand 25 pixels (downward) with a fluid animation.

    .successDropdwn {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      color: green;
      -webkit-transition: max-height 0.8s;
      -moz-transition: max-height 0.8s;
      transition: max-height 0.8s;
   }

Answer 1

something like this???

 $('.dropdwn').slideDown('slow') 

 .dropdwn{ background-color:#dddddd; height:25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdwn" style="display:none"></div> 

Answer 2

I'm not sure exactly what you want to do, but this is an example of using a transition by toggling a class with jquery:

https://jsfiddle.net/gydg7j9m/5/

.dropdwn {
  background: firebrick;
  width: 100%;
  height: 50px;
  max-height: 0;
  overflow: hidden;
  color: green;
  transition: max-height 0.8s;
}

 .expand {
    max-height: 150px;
 }

jQuery

$('#btn').on('click', function(){
$('.dropdwn').toggleClass('expand')
});