CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
Neil Aldred
Neil Aldred

Reputation: 107

using jQuery slide toggle with min height

I am trying to use jQuerys slideToggle on a div that has a minimum height. this causes the animation to jump and not move smoothly. I have spent a while now looking for a solution but i am unable to get anything to work. I have made an example on jsfiddle and would appreciate if anyone could help me solve this issue.

my css for the div being toggled:

#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/

Upvotes: 4

Views: 7934

Answers (2)

Ali Amjid
Ali Amjid

Reputation: 51

Answer by dave works, but there is no animation to min-height. it just "appears"

I have solve it with javascript without using min-height:

function toggle(item) {
    if (item.height() < 350) {
        item.css('height', 350);
    }
    item.slideToggle();
}

Upvotes: 0

dave
dave

Reputation: 64657

https://jsfiddle.net/rqkt58L1/

You could just disable min-height during the animation, and then turn it back on 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);
    });
  });
});

Upvotes: 5

Related Questions