How can I achieve a slide down effect like jQuery's slideDown, but only using CSS?

Question

There is a problem with CSS3 animations. They do not support the "auto" height property (and width, margins, etc.). What is the best way to create a CSS3 slide down animation without knowing the element's exact height?

The question is similar to this one, but the accepted answer there does not answer the actual question because they do not deal with the problem of calculating the height of the element you wish to slide.

I'm not sure if you're asking *exactly* the same thing, but take a look at this: http://stackoverflow.com/questions/5072526/css-3-equivalent-to-jquery-slideup-and-slidedown — thirtydot, Oct 06 '11 at 09:56
@thirtydot, there is no proper solution to the problem there. The only solution close to the auto height slide problem is using a line-height animation, which looks bad, and it's only compatible with text. — Ron Reiter, Oct 06 '11 at 10:07
@thirtydot, Also, the accepted answer there does not actually solve the problem. — Ron Reiter, Oct 06 '11 at 10:13
I agree with @Ron. You'll have to calculate the height of the element and adjust the animation accordingly. — Barrie Reader, Oct 06 '11 at 10:34
@Neurofluxation But how do I calculate the height dynamically? I want a working slideDown replacement, and it's pretty damn strange I actually need to write one myself. — Ron Reiter, Oct 06 '11 at 13:00
Yea, looks good @Blender, why don't you post it as an answer so I can accept it? Although I still with it was an actual slideDown replacement... — Ron Reiter, Oct 06 '11 at 15:08

score 3 · Accepted Answer · edited Mar 04 '21 at 01:52

3

Have you seen this demo I dug up on that answer?
I tried writing my own, but it didn't seem to work.

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});

#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

View on jsFiddle

edited Mar 04 '21 at 01:52

showdev

28,454
37
55
73

answered Oct 06 '11 at 15:12

Blender

289,723
53
439
496

I wish there was a more solid solution, perhaps some jQuery plugin like this: https://github.com/benbarnett/jQuery-Animate-Enhanced – Ron Reiter Oct 06 '11 at 16:13
So, what's wrong with that plugin? `slideDown` is just `animate({height: 'toggle'});`. – Blender Oct 06 '11 at 16:17
here's a mail from Ben, its author: Hey Sadly, I had to write a function to avoid accelerating these transitions as it was causing some weird display issues. If you have a look at this function: _isBoxShortcut() on line 354: https://github.com/benbarnett/jQuery-Animate-Enhanced/blob/master/scripts/src/jquery.animate-enhanced.js#L354 I'd love to find a way to get them to work. If you want to have a play around, just make that function 'return false' and then the plugin will convert all slideDown, SlideUp and slideToggle shortcuts to CSS3 animations. – Ron Reiter Oct 06 '11 at 18:03

score 1 · Answer 2 · answered Feb 17 '15 at 16:52

I am using this:

.slide-down {
  transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
  overflow: hidden;
  max-height: 100px; 

  &.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
}

You may want to use a variable for the effect duration and easing if you are using LESS or Sass.
To trigger the effect, use $('.slide-down').toggleClass('collapsed').
If 100px is too little for your container, set a different max-height using an additional CSS class in the element.
If you feel fancy, try using cubic-bezier(0.17, 0.04, 0.03, 0.94)instead of ease-out.

score 1 · Answer 3 · answered Oct 06 '11 at 15:04

1

You could know the height of the element by duplicating it, setting its height to "auto" and asking it what its height is in pixels.

Say this is the div you want to animate on: <div id="mydiv" style="height:0px">, use this code to figure out its height (using jQuery for simplicity only):

var divHeight = $("#mydiv").clone().css("height", "auto").height();

answered Oct 06 '11 at 15:04

dutzi

1,880
1
18
23

Hey @dutzi, why do you need to clone it? Why not just set auto height and measure it's height? – Ron Reiter Oct 06 '11 at 15:09
Because some browsers might try to render the element in its "new" height before you change it back, causing it to flicker. You could change its "display" to "none" before, though... – dutzi Oct 06 '11 at 15:15

score -1 · Answer 4 · answered Oct 06 '11 at 13:44

-1

Check this out : http://jsfiddle.net/gion_13/eNR6Q/ It's just css3 animation. to use in other browsers change/add browser specific vendor css prefixes : "-moz" for firefox, "-webkit" for chrome&safari, "-o" for opera and "-ms" for ie

answered Oct 06 '11 at 13:44

gion_13

41,171
10
96
108

not a good answer, since it does not deal with auto height. thanks though – Ron Reiter Oct 06 '11 at 15:10

How can I achieve a slide down effect like jQuery's slideDown, but only using CSS?

4 Answers4