Reduce div height from top using jQuery or javascript -

what trying when event called div #target's height reduced/increased top or top content hidden/visible specific size. can't think of way that.

the following code reduces/adds height bottom want reduce top.

$(function() {      $("button:first").on("click", function() {      $("#target").css("height", "+=50px");    });      $("button:last").on("click", function() {      $("#target").css("height", "-=50px");    });  });

#target {    background: purple;    color: white;    height: 300px;    width: 200px;  }    div {    float: left;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div>    <button>plus</button>    <button>minus</button>  </div>  <div id="target">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    </div>

you have current height of element, whatever math on it, , set new css value.

p.s. add , reduce bottom because way browser renders content. top left bottom right. if add or subtract height bottom.

this should work.

$("button:first").on("click", function() {     var targ = $("#target"),           targht = targ.height(),           newtarght = targht + 50;      targ.height(newtarght); });  $("button:last").on("click", function() {     var targ = $("#target"),           targht = targ.height(),           newtarght = targht - 50;      targ.height(newtarght); });