3

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!

onjegolders
  • 1,049
  • 5
  • 22
  • 35

1 Answers1

1

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

darshanags
  • 2,519
  • 1
  • 13
  • 19
  • Thanks @darshanags, it works but is almost as jerky as with the old method. It's hard to see on the small fiddle example but the animation is done in two distinct parts and therefore doesn't really work well. Is there anyway of setting the min-height before the toggle takes place? – onjegolders Mar 19 '13 at 13:59
  • why do you want to use `min-height` instead of using `height`? – darshanags Mar 19 '13 at 14:00
  • in case the content exceeds the height of the window – onjegolders Mar 19 '13 at 14:03
  • which content? content in the `#hidden` div or the page content? – darshanags Mar 19 '13 at 14:09
  • content in the #hidden div. It's a largeish form so on smaller screens, may well be longer than the window height. – onjegolders Mar 19 '13 at 14:11
  • That works much better, still a bit jerkier (I think) than the natural slideToggle but pretty good. Thanks darshanags! Can you put it as an answer and I can tick it? – onjegolders Mar 19 '13 at 14:49
  • I've updated the answer. You can replace `animate` with `slideToggle` if you wish. @onjegolders – darshanags Mar 19 '13 at 14:54