CODEWITHSUNDEEP
jqueryslidetogglecss
onjegolders
onjegolders

Reputation: 1059

combining slideToggle successfully with min-height

I currently have a nicely hidden section at the top of my site which slides down upon click. The animation works great with slideToggle but I'd also like the div to cover at least the window height.

I have managed to set the window height as a variable and alter the css to reflect this but combining it with the slideToggle makes the animation jumpy.

jQuery(document).ready(function($) {
  var win = $(window).height();
  $("#hidden").css("min-height", win);
  $("a#toggle").click(function() {
   var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide';
   $("#toggle").text(txt);
   $("#hidden").slideToggle(500);
  });
});

Here is a fiddle http://jsfiddle.net/HZACf/

If you remove the first two lines of the jQuery, it slides as normal.

Thanks for your help!

Upvotes: 3

Views: 4807

Answers (1)

darshanags
darshanags

Reputation: 2519

Try animate:

jQuery(document).ready(function ($) {
    var $hidden = $("#hidden"),
    currentHeight = $hidden.height(),
    newHeight = $(window).height();

    newHeight = (currentHeight > newHeight) ? currentHeight : newHeight;

    $("#hidden").css("height", newHeight);

    $("a#toggle").click(function () {
        var txt = $("#hidden").is(':visible') ? 'Show' : 'Hide';
        $("#toggle").text(txt);
        $("#hidden").animate({
            height : "toggle"
        }, 500);
    });
});

I've used animate but you can use slideToggle instead as we are solely dealing with the elements' height now.

Fiddle here

Upvotes: 1

Related Questions