Using jQuery slide toggle with minimum height

Question

I am trying to use jQuerys slideToggle on a div with a minimum height. this makes the animation jump and not move smoothly. I spent some time finding a solution, but I cannot get anything to work. I did an example on jsfiddle and would appreciate it if someone would help me solve this problem.

my css to switch div:

#selected-display{
    height:calc(100vh - 50px);
    display:none;
    min-height: 750px;
}

my javascript:

$(document).ready(function(){
    $(".toggle-display").click(function(){
        $("#selected-display").slideToggle("slow");

    });
});

https://jsfiddle.net/4y3q27mh/

Answer 1

https://jsfiddle.net/rqkt58L1/

You can simply turn off the mini-height during the animation, and then turn it on again when the animation is over:

$(document).ready(function () {
  $(".toggle-display").click(function () {
    var minHeight = $("#selected-display").css('min-height');
    $("#selected-display").css('min-height',0).slideToggle("slow", function() {
        $(this).css('min-height', minHeight);
    });
  });
});