How can I transition height 0 to height auto using CSS

Question

I am trying to make a  lt ul gt  slide down using CSS transitions   The  lt ul gt  starts off at height  0   On hover  the height is set to height auto   However  this is causing it to simply appear  not transition   If I do it from height  40px  to height  auto   then it will slide up to height  0   and then suddenly jump to the correct height   How else could I do this without using JavaScript    x000D   x000D   child0   x000D    height  0  x000D    overflow  hidden  x000D    background-color   dedede  x000D    -moz-transition  height 1s ease  x000D    -webkit-transition  height 1s ease  x000D    -o-transition  height 1s ease  x000D    transition  height 1s ease  x000D    x000D   parent0 hover  child0   x000D    height  auto  x000D    x000D   child40   x000D    height  40px  x000D    overflow  hidden  x000D    background-color   dedede  x000D    -moz-transition  height 1s ease  x000D    -webkit-transition  height 1s ease  x000D    -o-transition  height 1s ease  x000D    transition  height 1s ease  x000D    x000D   parent40 hover  child40   x000D    height  auto  x000D    x000D  h1   x000D    font-weight  bold  x000D    x000D  The only difference between the two snippets of CSS is one has height  0  the other height  40  x000D   lt hr gt  x000D   lt div id  parent0  gt  x000D     lt h1 gt Hover me  height  0  lt  h1 gt  x000D     lt div id  child0  gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt hr gt  x000D   lt div id  parent40  gt  x000D     lt h1 gt Hover me  height  40  lt  h1 gt  x000D     lt div id  child40  gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve met this problem and found my workaround   Firstly I tried to use max-height  But there are two problems    I m not really sure what is the max-height  since I m expanding an unknown length text block  If I set max-height too large  there is a large delay when collapsing    Then  my workaround   function toggleBlock e        var target   goog dom getNextElementSibling e target       if  target style height  amp  amp  target style height     0px       collapsing         goog style setHeight target  target clientHeight           setTimeout function                target style height    0px              100         else     expanding         target style height    auto             get the actual height         var height   target clientHeight          target style height    0px           setTimeout function                goog style setHeight target  height              100           setTimeout function                  Set this because I have expanding blocks inside expanding blocks             target style height  auto              600     time is set 100   transition-duration           The scss   div block       height  0px      overflow  hidden       include transition-property height        include transition-duration 0 5s

User · Answer

You can t currently animate on height when one of the heights involved is auto  you have to set two explicit heights

User · Answer

I posted an answer with some JavaScript and got downvoted  so got annoyed and tried again  and have cracked it with CSS only   This solution uses a few  techniques     padding-bottom 100   hack  where percentages are defined in terms of the current width of the element  More info on this technique  float shrink-wrapping   necessitating an extra div to apply the float clearing hack  unsemantic use of https   caniuse com  feat css-writing-mode and some transformations to undo it  this allows use of the padding hack above in a vertical context    The upshot though is that we get performant transitioning using CSS only  and a single transition function to smoothly achieve the transition  the holy grail   Of course  there s a downside  I can t work out how to control the width at which content gets cut off  overflow hidden   because of the padding-bottom hack  the width and height are intimately related   There may be a way though  so will come back to it   https   jsfiddle net EoghanM n1rp3zb4 28    x000D   x000D  body   x000D    padding  1em  x000D    x000D   x000D   trigger   x000D    font-weight  bold  x000D    x000D   x000D      expander is there for float clearing purposes only    x000D   expander  after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   x000D   outer   x000D    float  left     purpose  shrink to fit content    x000D    border  1px solid green  x000D    overflow  hidden  x000D    x000D   x000D   inner   x000D    transition  padding-bottom 0 3s ease-in-out      or whatever crazy transition function you can come up with     x000D    padding-bottom  0       percentage padding is defined in terms of width  The width at this level is equal to the height of the content    x000D    height  0  x000D   x000D       unfortunately  change of writing mode has other bad effects like orientation of cursor    x000D    writing-mode  vertical-rl  x000D    cursor  default     don t want the vertical-text  sideways I-beam     x000D    transform  rotate -90deg  translateX -100        undo writing mode    x000D    transform-origin  0 0  x000D    margin  0      left right margins here will add to height    x000D    x000D   x000D   inner  gt  div   white-space  nowrap    x000D   x000D   expander hover  inner      to keep open when expanded    x000D   trigger hover  expander  inner   x000D    padding-bottom  100   x000D    x000D   lt div class  trigger  gt HoverMe lt  div gt  x000D   lt div class  expander  gt  x000D     lt div class  outer  gt  x000D       lt div class  inner  gt  x000D         lt div gt First Item lt  div gt  x000D         lt div gt Content lt  div gt  x000D         lt div gt Content lt  div gt  x000D         lt div gt Content lt  div gt  x000D         lt div gt Long Content can t be wider than outer height unfortunately lt  div gt  x000D         lt div gt Last Item lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div gt  x000D    after content lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I wanted to have a div slide open close not just vertically  but also horizontally  so it effectively slides open from the top-left corner to the bottom-right corner  When researching  I ran into this question  but the answers are mainly workarounds and approximations  I wanted a more precise approach    Finally I found a way to do it   Basically my code below achieves this    smooth transitions starting and ending exact where you want them to be  so an ease in out is a real ease in out No assumptions on heights or widths or maximum heights and widths  No hardcoded numbers The transition works also after resizing the containing div  either be it through a window resize or programmatically  the content div is vertically auto-scrolled when the width gets too small  but doesn t do this during transition No specific structure is needed in the HTML code or CSS  Only a transition definition in one class   anim    So here it is     lt style gt   anim   transition  all 2s ease-out     content   background-color  lightgrey     lt  style gt    lt input type  button  onclick  toggleDiv    value  Toggle  gt  lt br gt   lt div id  content  gt      The contents of my div  lt br gt      The contents of my div  Which could be a bit wider  lt br gt      The contents of my div  Or could be even a bit more wider  lt br gt      The contents of my div  lt br gt   lt  div gt    lt script gt      function initDiv                put a wrapper around content         var content   document getElementById  content            var wrapper   document createElement  DIV                 wrapper becomes sibling before content         content parentNode insertBefore wrapper  content                    put content inside         wrapper appendChild  content               add transition settings through class         wrapper className    anim           wrapper style overflow    hidden                                              make wrapper invisible                wrapper style height   0          wrapper style width   0          wrapper style display    none               add listener to end of transition of wrapper          wrapper addEventListener               transitionend                function  e                       is it truely a transition on the wrapper  and not on a child in the wrapper or content                  if  e target    this                         if  this style width     0px        it was the end of closing transition                            set wrapper to not-displayed  so elements are no longer included in the tabIndex  if set                           this style display    none                          else      it was the end of opening transition                            put width and height of content to 100  so it responds to window resizes while open                             content is always first and only child                          this children 0  style width    100                            this children 0  style height    100                               set overflow-y responsive to window resizing                         wrapper style overflowY    auto                                                                         false              function toggleDiv             var content   document getElementById  content            var wrapper   content parentNode           if  wrapper style width     0px        triggered from closed state                set content width to width available to wrapper             content style width   wrapper parentNode scrollWidth                 make wrapper visible             wrapper style display    block                  set the height to the rendered content height              content style height   content scrollHeight                  adjust transition duration so that it has a more or less constant speed regardless of size of content             wrapper style transitionDuration   0 1   content clientHeight 200    s                  set width to maximum avaible and height to rendered content height  triggers transition              wrapper style width    100                wrapper style height   content style height             else      triggered from opened state                content width was set to 100  on transitionend  Make it fixed again to the current available width             content style width   wrapper parentNode scrollWidth                 same for height  only the rendered content height             content style height   content scrollHeight               wrapper style overflowY    hidden                   adjust transition duration again  window -and content- could have been resized              wrapper style transitionDuration   0 1   content clientHeight 200    s                  set wrapper size to zero and trigger transition  triggers transition              wrapper style height   0              wrapper style width   0                     initDiv     lt  script gt

User · Answer

I m hesitant to post this as it violates the  no javascript  part of the question  but will do so anyway as it extends upon the yScale answer https   stackoverflow com a 17260048 6691 so could be thought of as a fix for the  doesn t actually remove the space  problem with that answer  with the basic scale effect still working when JavaScript is disabled   One other caveat is that this should not be used with a general  hover  CSS rule  but should only be used when a transition is triggered by adding a class in the JavaScript  at which point you d trigger a time-limited execution of the requestAnimationFrame logic  The jsfiddle example below runs continuously in the background for demonsration purposes  which is not suitable for a normal website where there s other things going on   Here s the demo  http   jsfiddle net EoghanM oa5dprwL 5   Basically  we use requestAnimationFrame to monitor the resultant height of the box after the scaleY transformation has been applied  el getBoundingClientRect   height gets this   and then apply a negative margin-bottom on the element to  eat up  the blank space   This works with any of the transformation effects  I ve added a rotateX-with-perspective demo also   I haven t included code to maintain any existing margin bottom on the element

User · Answer

My workaround is to transition max-height to the exact content height for a nice smooth animation  then use a transitionEnd callback to set max-height to 9999px so the content can resize freely    x000D   x000D  var content       content    x000D  content inner       content  inner       inner div needed to get size of content when closed x000D   x000D     css transition callback x000D  content on  transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd   function e   x000D      if content hasClass  open     x000D          content css  max-height   9999      try setting this to  none     I dare you  x000D        x000D      x000D   x000D      toggle   on  click   function e   x000D      content toggleClass  open closed    x000D      content contentHeight   content outerHeight    x000D       x000D      if content hasClass  closed     x000D           x000D             disable transitions  amp  set max-height to content height x000D          content removeClass  transitions   css  max-height   content contentHeight   x000D          setTimeout function    x000D               x000D                 enable  amp  start transition x000D              content addClass  transitions   css   x000D                   max-height   0  x000D                   opacity   0 x000D                  x000D               x000D             10      10ms timeout is the secret ingredient for disabling enabling transitions x000D             chrome only needs 1ms but FF needs  10ms or it chokes on the first animation for some reason x000D           x000D       else if content hasClass  open       x000D           x000D          content contentHeight    content inner outerHeight       if closed  add inner height to content height x000D          content css   x000D               max-height   content contentHeight  x000D               opacity   1 x000D              x000D           x000D        x000D      x000D   transitions   x000D      transition  all 0 5s ease-in-out  x000D      -webkit-transition  all 0 5s ease-in-out  x000D      -moz-transition  all 0 5s ease-in-out  x000D    x000D   x000D  body   x000D      font-family Arial  x000D      line-height  3ex  x000D    x000D  code   x000D      display  inline-block  x000D      background   fafafa  x000D      padding  0 1ex  x000D    x000D   toggle   x000D      display block  x000D      padding 10px  x000D      margin 10px auto  x000D      text-align center  x000D      width 30ex  x000D    x000D   content   x000D      overflow hidden  x000D      margin 10px  x000D      border 1px solid  666  x000D      background  efefef  x000D      opacity 1  x000D    x000D   content  inner   x000D      padding 10px  x000D      overflow auto  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   lt div id  content  class  open  gt  x000D       lt div class  inner  gt  x000D           lt h3 gt Smooth CSS Transitions Between  lt code gt height  0 lt  code gt  and  lt code gt height  auto lt  code gt  lt  h3 gt  x000D           lt p gt A clever workaround is to use  lt code gt max-height lt  code gt  instead of  lt code gt height lt  code gt   and set it to something bigger than your content  Problem is the browser uses this value to calculate transition duration  So if you set it to  lt code gt max-height  1000px lt  code gt  but the content is only 100px high  the animation will be 10x too fast  lt  p gt  x000D           lt p gt Another option is to measure the content height with JS and transition to that fixed value  but then you have to keep track of the content and manually resize it if it changes  lt  p gt  x000D           lt p gt This solution is a hybrid of the two - transition to the measured content height  then set it to  lt code gt max-height  9999px lt  code gt  after the transition for fluid content sizing  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   lt br   gt  x000D   x000D   lt button id  toggle  gt Challenge Accepted  lt  button gt  x000D   x000D   x000D

User · Answer

This isn t exactly a  solution  to the problem  but more of a workaround  It only works as written with text  but can be changed to work with other elements as needed I m sure    originalContent       font-size 0px      transition font-size  2s ease-in-out     show      class to add to content        font-size 14px      Here is an example  http   codepen io overthemike pen wzjRKa  Essentially  you set the font-size to 0 and transition that instead of the height  or max-height  or scaleY   etc  at a quick enough pace to get the height to transform to what you want  To transform the actual height with CSS to auto isn t currently possible  but transforming the content within is  hence the font-size transition    Note - there IS javascript in the codepen  but it s only purpose is to add remove css classes on click for the accordion  This can be done with hidden radio buttons  but I wasn t focused on that  just the height transformation

User · Answer

A visual workaround to animating height using CSS3 transitions is to animate the padding instead    You don t quite get the full wipe effect  but playing around with the transition-duration and padding values should get you close enough  If you don t want to explicitly set height max-height  this should be what you re looking for   div       height  0      overflow  hidden      padding  0 18px      -webkit-transition  all  5s ease         -moz-transition  all  5s ease              transition  all  5s ease    div animated       height  auto      padding  24px 18px      http   jsfiddle net catharsis n5XfG 17   riffed off stephband s above jsFiddle

User · Answer

Here s a solution I just used in combination with jQuery  This works for the following HTML structure    lt nav id  main-nav  gt       lt ul gt           lt li gt               lt a class  main-link  href  yourlink html  gt Link lt  a gt               lt ul gt                   lt li gt  lt a href  yourlink html  gt Sub Link lt  a gt  lt  li gt               lt  ul gt           lt  li gt       lt  ul gt   lt  nav gt    and the function           main-nav li ul   each function             me     this              Count the number of li elements in this UL         var liCount    me find  li   size              Multiply the liCount by the height   the margin on each li             ulHeight   liCount   28             Store height in the data-height attribute in the UL          me attr  data-height   ulHeight             You could then use a click function to set and remove the height using css        main-nav li a main-link   click function          Collapse all submenus back to 0         main-nav li ul   removeAttr  style           this  parent   addClass  current           Set height on current submenu to it s height     var  currentUl      li current ul            currentUlHeight    currentUl attr  data-height         CSS    main-nav li ul        height  0      position  relative      overflow  hidden      opacity  0       filter  alpha opacity 0        -ms-filter   alpha opacity 0        -khtml-opacity  0       -moz-opacity  0      -webkit-transition  all  6s ease-in-out      -moz-transition  all  6s ease-in-out      -o-transition  all  6s ease-in-out      -ms-transition  all  6s ease-in-out      transition  all  6s ease-in-out      main-nav li current ul       opacity  1 0       filter  alpha opacity 100        -ms-filter   alpha opacity 100        -khtml-opacity  1 0       -moz-opacity  1 0      ie  main-nav li current ul   height  auto  important     main-nav li   height  25px  display  block  margin-bottom  3px

User · Answer

No hard coded values   No JavaScript   No approximations   The trick is to use a hidden  amp  duplicated div to get the browser to understand what 100  means    This method is suitable whenever you re able to duplicate the DOM of the element you wish to animate     x000D   x000D   outer   x000D    border  dashed red 1px  x000D    position  relative  x000D    x000D   x000D   dummy   x000D    visibility  hidden  x000D    x000D   x000D   real   x000D    position  absolute  x000D    background  yellow  x000D    height  0  x000D    transition  height 0 5s  x000D    overflow  hidden  x000D    x000D   x000D   outer hover gt  real   x000D    height  100   x000D    x000D  Hover over the box below  x000D   lt div class  outer  gt  x000D     lt  -- The actual element that you d like to animate -- gt  x000D     lt div class  real  gt  x000D  unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable x000D  content unpredictable content unpredictable content unpredictable content x000D     lt  div gt  x000D     lt  -- An exact copy of the element you d like to animate  -- gt  x000D     lt div class  dummy  aria-hidden  true  gt  x000D  unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable x000D  content unpredictable content unpredictable content unpredictable content x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   menu   x000D      margin  0 auto  x000D      padding  0  x000D      list-style  none  x000D      text-align  center  x000D      max-width  300px  x000D      width  100   x000D    x000D   x000D   menu li   x000D      display  block  x000D      margin-bottom  5px  x000D    x000D   menu li a   x000D      color   333  x000D      display  inline-block  x000D      font-size  20px  x000D      line-height  28px  x000D      font-weight  500  x000D      font-family   Poppins   sans-serif  x000D      transition  all 0 5s  x000D      margin  0 0 10px  x000D    x000D   x000D   menu li submenu  submenu item   x000D      margin  0  x000D      padding  0  x000D      width  100   x000D      max-height  0  x000D      overflow  hidden  x000D      display  flex  x000D      flex-direction  row  x000D      text-align  center  x000D      flex-wrap  wrap  x000D      justify-content  center  x000D      align-items  center  x000D      transition  max-height 1s ease-out  important  x000D      transition-delay  0s  important  x000D    x000D   x000D   menu li submenu hover  submenu item   x000D      max-height  1000px  x000D      transition  max-height 2s ease-in  important  x000D    x000D   x000D   menu li submenu  submenu item li   x000D      margin-bottom  0  x000D      width  100   x000D      display  block  x000D      margin  0  x000D      padding  0  x000D      list-style  none  x000D      position  relative  x000D    x000D   lt p gt First you should complete markup  like this lt  p gt  x000D   x000D   lt ul class  menu  gt  x000D     lt li class  submenu  gt  x000D       lt a href     gt Home lt  a gt  x000D       lt ul class  submenu item  gt  x000D           lt li gt  lt a href  index html  gt Default lt  a gt  lt  li gt  x000D           lt li gt  lt a href  index-2 html  gt Particle lt  a gt  lt  li gt  x000D           lt li gt  lt a href  index-3 html  gt Youtube Video lt  a gt  lt  li gt  x000D           lt li gt  lt a href  index-4 html  gt Self Hosted Video lt  a gt  lt  li gt  x000D           lt li gt  lt a href  index-5 html  gt Slideshow lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

One sentence solution  Use padding transition  It s enough for most of cases such as accordion  and even better because it s fast due to that the padding value is often not big   If you want the animation process to be better  just raise the padding value    x000D   x000D   parent  border-top   999 1px solid   x000D  h1  margin   5rem  font-size  1 3rem  x000D   children   x000D    height  0  x000D    overflow  hidden  x000D    background-color   dedede  x000D    transition  padding  2s ease-in-out  opacity  2s ease-in-out  x000D    padding  0  5rem  x000D    opacity  0  x000D    x000D   children  before   children  after  content     display  block   x000D   children  before  margin-top  -2rem   x000D   children  after  margin-bottom  -2rem   x000D   parent hover  children   x000D    height  auto  x000D    opacity  1  x000D    padding  2 5rem  5rem    0 5   abs -2   make sure it s less than expected min-height    x000D    x000D   lt div class  parent  gt  x000D     lt h1 gt Hover me lt  h1 gt  x000D     lt div class  children  gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  parent  gt  x000D     lt h1 gt Hover me long content  lt  h1 gt  x000D     lt div class  children  gt Some content x000D       lt br gt Some content lt br gt Some content x000D       lt br gt Some content lt br gt Some content x000D       lt br gt Some content lt br gt Some content x000D       lt br gt Some content lt br gt Some content x000D       lt br gt Some content lt br gt Some content x000D       lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  parent  gt  x000D     lt h1 gt Hover me short content  lt  h1 gt  x000D     lt div class  children  gt Some content x000D       lt br gt Some content x000D       lt br gt Some content x000D       lt br gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

How about instead of height  you use something like below one   child0     visibility  hidden    opacity  0    transition  visibility 0s  opacity 0 5s linear    position  absolute       parent0 hover  child0     visibility  visible    opacity  1    position  relative      Works great as well  Please do add prefixes  Hope this helps someone   PS  if you still need height 0 to height something black magic  you can add height  0  to  child0 and then add height  inherit to  parent0 hover  child0  Simultaneously  you can add transition for height individually or just you all

User · Answer

I ve recently been transitioning the max-height on the li elements rather than the wrapping ul   The reasoning is that the delay for small max-heights is far less noticeable  if at all  compared to large max-heights  and I can also set my max-height value relative to the font-size of the li rather than some arbitrary huge number by using ems or rems   If my font size is 1rem  I ll set my max-height to something like 3rem  to accommodate wrapped text   You can see an example here   http   codepen io mindfullsilence pen DtzjE

User · Answer

You can  with a little bit of non-semantic jiggery-pokery  My usual approach is to animate the height of an outer DIV which has a single child which is a style-less DIV used only for measuring the content height    x000D   x000D  function growDiv     x000D    var growDiv   document getElementById  grow    x000D    if  growDiv clientHeight    x000D      growDiv style height   0  x000D      else   x000D      var wrapper   document querySelector   measuringWrapper    x000D      growDiv style height   wrapper clientHeight    px   x000D      x000D    x000D   grow   x000D    -moz-transition  height  5s  x000D    -ms-transition  height  5s  x000D    -o-transition  height  5s  x000D    -webkit-transition  height  5s  x000D    transition  height  5s  x000D    height  0  x000D    overflow  hidden  x000D    outline  1px solid red  x000D    x000D   lt input type  button  onclick  growDiv    value  grow  gt  x000D   lt div id  grow  gt  x000D     lt div class  measuringWrapper  gt  x000D       lt div gt  x000D        The contents of my div  x000D       lt  div gt  x000D       lt div gt  x000D        The contents of my div  x000D       lt  div gt  x000D       lt div gt  x000D        The contents of my div  x000D       lt  div gt  x000D       lt div gt  x000D        The contents of my div  x000D       lt  div gt  x000D       lt div gt  x000D        The contents of my div  x000D       lt  div gt  x000D       lt div gt  x000D        The contents of my div  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    One would like to just be able to dispense with the  measuringWrapper and just set the DIV s height to auto and have that animate  but that doesn t seem to work  the height gets set  but no animation occurs     x000D   x000D  function growDiv     x000D    var growDiv   document getElementById  grow    x000D    if  growDiv clientHeight    x000D      growDiv style height   0  x000D      else   x000D      growDiv style height    auto   x000D      x000D    x000D   grow   x000D    -moz-transition  height  5s  x000D    -ms-transition  height  5s  x000D    -o-transition  height  5s  x000D    -webkit-transition  height  5s  x000D    transition  height  5s  x000D    height  0  x000D    overflow  hidden  x000D    outline  1px solid red  x000D    x000D   lt input type  button  onclick  growDiv    value  grow  gt  x000D   lt div id  grow  gt  x000D     lt div gt  x000D      The contents of my div  x000D     lt  div gt  x000D     lt div gt  x000D      The contents of my div  x000D     lt  div gt  x000D     lt div gt  x000D      The contents of my div  x000D     lt  div gt  x000D     lt div gt  x000D      The contents of my div  x000D     lt  div gt  x000D     lt div gt  x000D      The contents of my div  x000D     lt  div gt  x000D     lt div gt  x000D      The contents of my div  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    My interpretation is that an explicit height is needed for the animation to run  You can t get an animation on height when either height  the start or end height  is auto

User · Answer

The solution that I ve always used was to first fade out  then shrink the font-size  padding and margin values  It doesn t look the same as a wipe  but it works without a static height or max-height   Working example    x000D   x000D     final display    x000D   menu  list   x000D      margin   5em 1em  x000D      padding  1em  x000D    x000D   x000D     hide    x000D   menu not  hover   list   x000D      font-size  0  x000D      margin  0  x000D      opacity  0  x000D      padding  0  x000D         fade out  then shrink    x000D      transition  opacity  25s  x000D                  font-size  5s  25s  x000D                  margin  5s  25s  x000D                  padding  5s  25s  x000D    x000D   x000D     reveal    x000D   menu hover  list   x000D         unshrink  then fade in    x000D      transition  font-size  25s  x000D                  margin  25s  x000D                  padding  25s  x000D                  opacity  5s  25s  x000D    x000D   lt div id  menu  gt  x000D       lt b gt hover me lt  b gt  x000D       lt ul id  list  gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   lt p gt Another paragraph    lt  p gt  x000D   x000D   x000D

User · Answer

Short code example    slider ul     overflow  hidden    -webkit-transition  max-height 3 3s ease      slider hide ul     max-height  0px      slider show ul     max-height  1000px

User · Answer

If you re using React  I can recommend react-animate-height    lt AnimateHeight height  isOpen    auto    0  gt       your content goes here  lt  AnimateHeight gt

User · Answer

Jake s answer to animate the max-height is great  but I found the delay caused by setting a large max-height annoying   One could move the collapsable content into an inner div and calculate the max height by getting the height of the inner div  via JQuery it d be the outerHeight         button   bind  click   function e       e preventDefault      w       outer      if  w hasClass  collapsed          w css    max-height       inner   outerHeight      px          else       w css    max-height    0px            w toggleClass  collapsed          Here s a jsfiddle link  http   jsfiddle net pbatey duZpT  Here s a jsfiddle with the absolute minimal amount of code required  http   jsfiddle net 8ncjjxh8

User · Answer

I combined both max-height and negative margin to achive this animation  I used max-height  2000px  but you can push that number to much higher value if needed  I animate the max-height on the expand and the margin on collapse  The js part is just the click  can be replaced with  hover or checkbox for pure css solution  There are only 2 problems i can see so far   The transition-timing is limited   i added only 2 timings  If you click again while the dropdown is collapsing  it will jump   Here s the result  x000D   x000D      document querySelectorAll   ab    forEach wrapper   gt        wrapper addEventListener  click   function              this classList toggle  active                x000D        margin  0    box-sizing  border-box      c     overflow  hidden      items     width  100     visibility  hidden    max-height  0    margin-bottom  -2000px    -webkit-transition  margin 0 6s cubic-bezier 1  0  1  1   max-height 0s 0 6s linear  visibility 0s 0 6s linear    transition  margin 0 6s cubic-bezier 1  0  1  1   max-height 0s 0 6s linear  visibility 0s 0 6s linear     items  gt        padding  1rem    background-color   ddd    -webkit-transition  background-color 0 6s ease    transition  background-color 0 6s ease     items  gt    hover     background-color   eee      ab     padding  1rem    cursor  pointer    background   eee     ab active    c  items     max-height  2000px    margin-bottom  0    visibility  visible    -webkit-transition  max-height 0 6s cubic-bezier 1  0  1  1     transition  max-height 0 6s cubic-bezier 1  0  1  1       dropdown     margin-right  1rem      wrapper     display  -webkit-box    display  flex    x000D   lt div class  wrapper  gt       lt div class  dropdown  gt           lt div class  ab  gt just text lt  div gt           lt div class  ab  gt just text lt  div gt           lt div class  ab  gt dropdown lt  div gt           lt div class  c  gt               lt div class  items  gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items asl dk l kasl d sa lk lt  p gt                   lt p gt items sal kd lt  p gt                   lt p gt items lt  p gt               lt  div gt           lt  div gt           lt div class  ab  gt just text lt  div gt           lt div class  ab  gt just text lt  div gt       lt  div gt            lt div class  dropdown  gt           lt div class  ab  gt dropdown lt  div gt           lt div class  c  gt               lt div class  items  gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt               lt  div gt           lt  div gt           lt div class  ab  gt text lt  div gt       lt  div gt            lt div class  dropdown  gt           lt div class  ab  gt placeholder lt  div gt           lt div class  ab  gt dropdown lt  div gt           lt div class  c  gt               lt div class  items  gt                   lt p gt items lt  p gt                   lt p gt items lt  p gt               lt  div gt           lt  div gt           lt div class  ab  gt placeholder lt  div gt           lt div class  ab  gt placeholder lt  div gt           lt div class  ab  gt placeholder lt  div gt       lt  div gt   lt  div gt   lt h1 gt text to be pushed lt  h1 gt  x000D   x000D   x000D

User · Answer

You can transition from height 0 to height auto providing that you also provide min-height and max-height   div stretchy      transition  1s linear     div stretchy hidden      height  0     div stretchy visible      height  auto      min-height 40px      max-height 400px

User · Answer

EDIT  Scroll down for updated answer  I was making a drop down list and saw this Post     many different answers but I decide to share my drop down list too      It s not perfect but at least it will using only css for drop down  I ve been using transform translateY y  to transform the list to the view     You can see more in the test  http   jsfiddle net BVEpc 4   I ve placed div behind every li because my drop down list are coming from up and to show them properly this was needed  my div code is    menu div       transition  0 5s 1s      z-index -1      -webkit-transform translateY -100        -webkit-transform-origin  top      and hover is      menu  gt  li hover div       transition  0 5s      -webkit-transform translateY 0       and because ul height is set to the content it can get over your body content that s why I did this for ul     menu ul       transition  0s 1 5s      visibility hidden      overflow hidden      and hover    menu  gt  li hover ul        transition none       visibility visible      the second time after transition is delay and it will get hidden after my drop down list has been closed animately      Hope later someone get benefit of this one   EDIT  I just can t believe ppl actually using this prototype  this drop down menu is only for one sub menu and that s all   I ve updated a better one that can have two sub menu for both ltr and rtl direction with IE 8 support   Fiddle for LTR  Fiddle for RTL  hopefully someone find this useful in future

User · Answer

Check out my post on a somewhat related question   Basically  start at height  0px   and let it transition to an exact height computed by JavaScript   function setInfoHeight         window  on  load resize   function             info   each function            var current     this         var closed     this  height      0        current show   height  auto   attr  h   current height            current height closed    0    current height                     Whenever the page loads resized  the element with class info will get its h attribute updated  Then a button triggers the style  height      to set it to that previously set h value   function moreInformation           icon-container   click function         var info     this  closest   dish-header   next   info       Just the one info     var icon     this  children   info-btn       Select the logo         Stop any ongoing animation loops  Without this  you could click button 10        times real fast  and watch an animation of the info showing and closing        for a few seconds after     icon stop        info stop            Flip icon and hide show info     icon toggleClass  flip            Metnod 1  animation handled by JS        info slideToggle  slow            Method 2  animation handled by CSS  use with setInfoheight function     info toggleClass  active   height icon is   flip     info attr  h      0                Here s the styling for the info class    info     padding  0 1em    line-height  1 5em    display  inline-block    overflow  hidden    height  0px    transition  height 0 6s  padding 0 6s     amp  active       border-bottom   thin-line      padding  1em          Styling might not be supported cross-browser  Here is the live example for this code   CodePen

User · Answer

Expanding on  jake s answer  the transition will go all the way to the max height value  causing an extremely fast animation - if you set the transitions for both  hover and off you can then control the crazy speed a little bit more   So the li hover is when the mouse enters the state and then the transition on the non-hovered property will be the mouse leave   Hopefully this will be of some help   e g     sidemenu li ul      max-height  0px     -webkit-transition  all  3s ease     -moz-transition  all  3s ease     -o-transition  all  3s ease     -ms-transition  all  3s ease     transition  all  3s ease     sidemenu li hover ul       max-height  500px      -webkit-transition  all 1s ease     -moz-transition  all 1s ease     -o-transition  all 1s ease     -ms-transition  all 1s ease     transition  all 1s ease       Adjust speeds to the possible height of the list      Here s a fiddle  http   jsfiddle net BukwJ

User · Answer

I was able to do this  I have a  child  amp  a  parent div  The child div fits perfectly within the parent s width height with absolute positioning  I then animate the translate property to push it s Y value down 100   Its very smooth animation  no glitches or down sides like any other solution here   Something like this  pseudo code   parent  position relative  overflow hidden         shown state     child     position absolute top 0  left 0 right 0 bottom 0    height  100     transition  transform  overlay-animation-duration ease-in-out     translate 0  0          Animate to hidden by sliding down      child slidedown      translate 0  100        Translate the element  out  the bottom of it s  scene container  mask  so its hidden        You would specify a height on  parent  in px     or leave as auto  This div then masks out the  child div when it slides down

User · Answer

The accepted answer works for most cases  but it doesn t work well when your div can vary greatly in height     the animation speed is not dependent on the actual height of the content  and it can look choppy   You can still perform the actual animation with CSS  but you need to use JavaScript to compute the height of the items  instead of trying to use auto  No jQuery is required  although you may have to modify this a bit if you want compatibility  works in the latest version of Chrome        x000D   x000D  window toggleExpand   function element    x000D      if   element style height    element style height     0px      x000D          element style height   Array prototype reduce call element childNodes  function p  c   return p    c offsetHeight    0     0     px   x000D        else   x000D          element style height    0px   x000D        x000D    x000D   menu  list   x000D      height  0px  x000D      transition  height 0 3s ease  x000D      background   d5d5d5  x000D      overflow  hidden  x000D    x000D   lt div id  menu  gt  x000D       lt input value  Toggle list  type  button  onclick  toggleExpand document getElementById  list      gt  x000D       lt ul id  list  gt  x000D           lt  -- Works well with dynamically-sized content  -- gt  x000D           lt li gt item lt  li gt  x000D           lt li gt  lt div style  height  100px  width  100px  background  red   gt  lt  div gt  lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use max-height in the transition and not height  And set a value on max-height to something bigger than your box will ever get   See JSFiddle demo provided by Chris Jordan in another answer here    x000D   x000D   menu  list   x000D      max-height  0  x000D      transition  max-height 0 15s ease-out  x000D      overflow  hidden  x000D      background   d5d5d5  x000D    x000D   x000D   menu hover  list   x000D      max-height  500px  x000D      transition  max-height 0 25s ease-in  x000D    x000D   lt div id  menu  gt  x000D       lt a gt hover me lt  a gt  x000D       lt ul id  list  gt  x000D           lt  -- Create a bunch  or not a bunch  of li s to see the timing  -- gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D           lt li gt item lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I know this is the thirty-somethingth answer to this question  but I think it s worth it  so here goes  This is a CSS-only solution with the following properties    There is no delay at the beginning  and the transition doesn t stop early  In both directions  expanding and collapsing   if you specify a transition duration of 300ms in your CSS  then the transition takes 300ms  period  It s transitioning the actual height  unlike transform  scaleY 0    so it does the right thing if there s content after the collapsible element  While  like in other solutions  there are magic numbers  like  pick a length that is higher than your box is ever going to be    it s not fatal if your assumption ends up being wrong  The transition may not look amazing in that case  but before and after the transition  this is not a problem  In the expanded  height  auto  state  the whole content always has the correct height  unlike e g  if you pick a max-height that turns out to be too low   And in the collapsed state  the height is zero as it should    Demo  Here s a demo with three collapsible elements  all of different heights  that all use the same CSS  You might want to click  full page  after clicking  run snippet   Note that the JavaScript only toggles the collapsed CSS class  there s no measuring involved   You could do this exact demo without any JavaScript at all by using a checkbox or  target   Also note that the part of the CSS that s responsible for the transition is pretty short  and the HTML only requires a single additional wrapper element    x000D   x000D    function      x000D        toggler   click function      x000D        this  next   toggleClass  collapsed    x000D        this  toggleClass  toggled       this just rotates the expander arrow x000D        x000D      x000D   collapsible-wrapper   x000D    display  flex  x000D    overflow  hidden  x000D    x000D   collapsible-wrapper after   x000D    content      x000D    height  50px  x000D    transition  height 0 3s linear  max-height 0s 0 3s linear  x000D    max-height  0px  x000D    x000D   collapsible   x000D    transition  margin-bottom 0 3s cubic-bezier 0  0  0  1   x000D    margin-bottom  0  x000D    max-height  1000000px  x000D    x000D   collapsible-wrapper collapsed  gt   collapsible   x000D    margin-bottom  -2000px  x000D    transition  margin-bottom 0 3s cubic-bezier 1  0  1  1   x000D                visibility 0s 0 3s  max-height 0s 0 3s  x000D    visibility  hidden  x000D    max-height  0  x000D    x000D   collapsible-wrapper collapsed after x000D    x000D    height  0  x000D    transition  height 0 3s linear  x000D    max-height  50px  x000D    x000D   x000D     END of the collapsible implementation  the stuff below x000D     is just styling for this demo    x000D   x000D   container   x000D    display  flex  x000D    align-items  flex-start  x000D    max-width  1000px  x000D    margin  0 auto  x000D      x000D   x000D   x000D   menu   x000D    border  1px solid  ccc  x000D    box-shadow  0 1px 3px rgba 0 0 0 0 5   x000D    margin  20px  x000D   x000D     x000D    x000D   x000D   menu-item   x000D    display  block  x000D    background  linear-gradient to bottom   fff 0   eee 100    x000D    margin  0  x000D    padding  1em  x000D    line-height  1 3  x000D    x000D   collapsible  menu-item   x000D    border-left  2px solid  888  x000D    border-right  2px solid  888  x000D    background  linear-gradient to bottom   eee 0   ddd 100    x000D    x000D   menu-item toggler   x000D    background  linear-gradient to bottom   aaa 0   888 100    x000D    color  white  x000D    cursor  pointer  x000D    x000D   menu-item toggler before   x000D    content      x000D    display  block  x000D    border-left  8px solid white  x000D    border-top  8px solid transparent  x000D    border-bottom  8px solid transparent  x000D    width  0  x000D    height  0  x000D    float  right  x000D    transition  transform 0 3s ease-out  x000D    x000D   menu-item toggler toggled before   x000D    transform  rotate 90deg   x000D    x000D   x000D  body   font-family  sans-serif  font-size  14px    x000D   x000D       after   x000D    box-sizing  border-box  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  container  gt  x000D     lt div class  menu  gt  x000D       lt div class  menu-item  gt Something involving a holodeck lt  div gt  x000D       lt div class  menu-item  gt Send an away team lt  div gt  x000D       lt div class  menu-item toggler  gt Advanced solutions lt  div gt  x000D       lt div class  collapsible-wrapper collapsed  gt  x000D         lt div class  collapsible  gt  x000D           lt div class  menu-item  gt Separate saucer lt  div gt  x000D           lt div class  menu-item  gt Send an away team that includes the captain  despite Riker s protest  lt  div gt  x000D           lt div class  menu-item  gt Ask Worf lt  div gt  x000D           lt div class  menu-item  gt Something involving Wesley  the 19th century  and a holodeck lt  div gt  x000D           lt div class  menu-item  gt Ask Q for help lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  menu-item  gt Sweet-talk the alien aggressor lt  div gt  x000D       lt div class  menu-item  gt Re-route power from auxiliary systems lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  menu  gt  x000D       lt div class  menu-item  gt Something involving a holodeck lt  div gt  x000D       lt div class  menu-item  gt Send an away team lt  div gt  x000D       lt div class  menu-item toggler  gt Advanced solutions lt  div gt  x000D       lt div class  collapsible-wrapper collapsed  gt  x000D         lt div class  collapsible  gt  x000D           lt div class  menu-item  gt Separate saucer lt  div gt  x000D           lt div class  menu-item  gt Send an away team that includes the captain  despite Riker s protest  lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  menu-item  gt Sweet-talk the alien aggressor lt  div gt  x000D       lt div class  menu-item  gt Re-route power from auxiliary systems lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  menu  gt  x000D       lt div class  menu-item  gt Something involving a holodeck lt  div gt  x000D       lt div class  menu-item  gt Send an away team lt  div gt  x000D       lt div class  menu-item toggler  gt Advanced solutions lt  div gt  x000D       lt div class  collapsible-wrapper collapsed  gt  x000D         lt div class  collapsible  gt  x000D           lt div class  menu-item  gt Separate saucer lt  div gt  x000D           lt div class  menu-item  gt Send an away team that includes the captain  despite Riker s protest  lt  div gt  x000D           lt div class  menu-item  gt Ask Worf lt  div gt  x000D           lt div class  menu-item  gt Something involving Wesley  the 19th century  and a holodeck lt  div gt  x000D           lt div class  menu-item  gt Ask Q for help lt  div gt  x000D           lt div class  menu-item  gt Separate saucer lt  div gt  x000D           lt div class  menu-item  gt Send an away team that includes the captain  despite Riker s protest  lt  div gt  x000D           lt div class  menu-item  gt Ask Worf lt  div gt  x000D           lt div class  menu-item  gt Something involving Wesley  the 19th century  and a holodeck lt  div gt  x000D           lt div class  menu-item  gt Ask Q for help lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  menu-item  gt Sweet-talk the alien aggressor lt  div gt  x000D       lt div class  menu-item  gt Re-route power from auxiliary systems lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    How does it work   There are in fact two transitions involved in making this happen  One of them transitions the margin-bottom from 0px  in the expanded state  to -2000px in the collapsed state  similar to this answer   The 2000 here is the first magic number  it s based on the assumption that your box won t be higher than this  2000 pixels seems like a reasonable choice    Using the margin-bottom transition alone by itself has two issues    If you actually have a box that s higher than 2000 pixels  then a margin-bottom  -2000px won t hide everything -- there ll be visible stuff even in the collapsed case  This is a minor fix that we ll do later  If the actual box is  say  1000 pixels high  and your transition is 300ms long  then the visible transition is already over after about 150ms  or  in the opposite direction  starts 150ms late     Fixing this second issue is where the second transition comes in  and this transition conceptually targets the wrapper s minimum height   conceptually  because we re not actually using the min-height property for this  more on that later    Here s an animation that shows how combining the bottom margin transition with the minimum height transition  both of equal duration  gives us a combined transition from full height to zero height that has the same duration     The left bar shows how the negative bottom margin pushes the bottom upwards  reducing the visible height  The middle bar shows how the minimum height ensures that in the collapsing case  the transition doesn t end early  and in the expanding case  the transition doesn t start late  The right bar shows how the combination of the two causes the box to transition from full height to zero height in the correct amount of time   For my demo I ve settled on 50px as the upper minimum height value  This is the second magic number  and it should be lower than the box  height would ever be  50px seems reasonable as well  it seems unlikely that you d very often want to make an element collapsible that isn t even 50 pixels high in the first place   As you can see in the animation  the resulting transition is continuous  but it is not differentiable -- at the moment when the minimum height is equal to the full height adjusted by the bottom margin  there is a sudden change in speed  This is very noticeable in the animation because it uses a linear timing function for both transitions  and because the whole transition is very slow  In the actual case  my demo at the top   the transition only takes 300ms  and the bottom margin transition is not linear  I ve played around with a lot of different timing functions for both transitions  and the ones I ended up with felt like they worked best for the widest variety of cases   Two problems remain to fix    the point from above  where boxes of more than 2000 pixels height aren t completely hidden in the collapsed state  and the reverse problem  where in the non-hidden case  boxes of less than 50 pixels height are too high even when the transition isn t running  because the minimum height keeps them at 50 pixels    We solve the first problem by giving the container element a max-height  0 in the collapsed case  with a 0s 0 3s transition  This means that it s not really a transition  but the max-height is applied with a delay  it only applies once the transition is over  For this to work correctly  we also need to pick a numerical max-height for the opposite  non-collapsed  state  But unlike in the 2000px case  where picking too large of a number affects the quality of the transition  in this case  it really doesn t matter  So we can just pick a number that is so high that we know that no height will ever come close to this  I picked a million pixels  If you feel you may need to support content of a height of more than a million pixels  then 1  I m sorry  and 2  just add a couple of zeros   The second problem is the reason why we re not actually using min-height for the minimum height transition  Instead  there is an   after pseudo-element in the container with a height that transitions from 50px to zero  This has the same effect as a min-height  It won t let the container shrink below whatever height the pseudo-element currently has  But because we re using height  not min-height  we can now use max-height  once again applied with a delay  to set the pseudo-element s actual height to zero once the transition is over  ensuring that at least outside the transition  even small elements have the correct height  Because min-height is stronger than max-height  this wouldn t work if we used the container s min-height instead of the pseudo-element s height  Just like the max-height in the previous paragraph  this max-height also needs a value for the opposite end of the transition  But in this case we can just pick the 50px   Tested in Chrome  Win  Mac  Android  iOS   Firefox  Win  Mac  Android   Edge  IE11  except for a flexbox layout issue with my demo that I didn t bother debugging   and Safari  Mac  iOS   Speaking of flexbox  it should be possible to make this work without using any flexbox  in fact I think you could make almost everything work in IE7  ndash  except for the fact that you won t have CSS transitions  making it a rather pointless exercise

User · Answer

Use max-height with different transition easing and delay for each state    HTML    lt a href     id  trigger  gt Hover lt  a gt   lt ul id  toggled  gt       lt li gt One lt  li gt       lt li gt Two lt  li gt       lt li gt Three lt  li gt   lt ul gt    CSS    toggled      max-height  0px      transition  max-height  8s cubic-bezier 0  1  0  1  - 1s      trigger hover    toggled      max-height  9999px      transition-timing-function  cubic-bezier 0 5  0  1  0        transition-delay  0s      See example  http   jsfiddle net 0hnjehjc 1

User · Answer

Here s a way to transition from any starting height  including 0  to auto  full size and flexible  without requiring hard-set code on a per-node basis or any user-code to initialize  https   github com csuwildcat transition-auto  This is basically the holy grail for what you want  I believe --  http   codepen io csuwldcat pen kwsdF  Just slap the following JS file into your page  and all you need to do after that is add remove a single boolean attribute - reveal    - from the nodes you want to expand and contract   Here s all you need to do as the user  once you include the code block found below the example code        Nothing out of the ordinary in your styles       lt style gt      div           height  0          overflow  hidden          transition  height 1s         lt  style gt        Just add and remove one attribute and transition to from auto         lt div gt      I have tons of content and I am 0px in height you can t see me     lt  div gt    lt div reveal gt       I have tons of content and I am 0px in height you can t see me         but now that you added the  reveal  attribute        I magically transitioned to full height      lt  div gt    Here s the code block to include in your page  after that  it s all gravy   Drop this JS file in your page - it all Just Works        Code for height  auto  transitioning      function doc       feature detection for browsers that report different values for scrollHeight when an element s overflow is hidden vs visible  Firefox  IE     var test   doc documentElement appendChild doc createElement  x-reveal-test         test innerHTML    -       test style cssText    display  block  important  height  0px  important  padding  0px  important  font-size  0px  important  border-width  0px  important  line-height  1px  important  overflow  hidden  important    var scroll   test scrollHeight    2  doc documentElement removeChild test    var loading   true      numReg       0-9      0-9              skipFrame   function fn         requestAnimationFrame function            requestAnimationFrame fn                           2 out of 3 uses of this function are purely to work around Chrome s catastrophically busted implementation of auto value CSS transitioning        revealFrame   function el  state  height           el setAttribute  reveal-transition    frame            el style height   height          skipFrame function                el setAttribute  reveal-transition   state               el style height                              transitionend   function e         var node   e target        if  node hasAttribute  reveal              if  node getAttribute  reveal-transition       running   revealFrame node   complete                       else           node removeAttribute  reveal-transition            node style height                          animationstart   function e         var node   e target            name   e animationName           if  name     reveal     name     unreveal              if  loading  return revealFrame node   complete    auto             var style   getComputedStyle node               offset    Number style paddingTop match numReg  1                            Number style paddingBottom match numReg  1                            Number style borderTopWidth match numReg  1                            Number style borderBottomWidth match numReg  1              if  name     reveal              node setAttribute  reveal-transition    running              node style height   node scrollHeight -  offset   scroll     px                     else               if  node getAttribute  reveal-transition       running   node style height                   else revealFrame node   running   node scrollHeight - offset    px                              doc addEventListener  animationstart   animationstart  false   doc addEventListener  MSAnimationStart   animationstart  false   doc addEventListener  webkitAnimationStart   animationstart  false   doc addEventListener  transitionend   transitionend  false   doc addEventListener  MSTransitionEnd   transitionend  false   doc addEventListener  webkitTransitionEnd   transitionend  false           Batshit readyState DOMContentLoaded code to dance around Webkit Chrome animation auto-run weirdness on initial page load      If they fixed their code  you could just check for if doc readyState     complete   in animationstart s if loading  check    if  document readyState     complete         skipFrame function            loading   false            else document addEventListener  DOMContentLoaded   function e       skipFrame function            loading   false             false       Styles that allow for  reveal  attribute triggers    var styles   doc createElement  style        t    transition  none         au    animation  reveal 0 001s         ar    animation  unreveal 0 001s         clip       from   opacity  0    to   opacity  1            r    keyframes reveal    clip      u    keyframes unreveal    clip   styles textContent     reveal    -ms-   au    -webkit-   au   -moz-   au   au              reveal-transition  frame     -ms-    t    -webkit-    t    -moz-    t   t    height  auto             reveal-transition  complete     height  auto             reveal-transition  not  reveal     -webkit-   ar   -moz-   ar   ar              -ms-    r     -webkit-    r     -moz-    r   r         -ms-    u    -webkit-    u     -moz-    u   u   doc querySelector  head   appendChild styles       document        Code for DEMO         document addEventListener  click   function e         if  e target nodeName     BUTTON             var next   e target nextElementSibling          next hasAttribute  reveal     next removeAttribute  reveal     next setAttribute  reveal                       false

User · Answer

This is regular problem I ve solved like this   http   jsfiddle net ipeshev d1dfr0jz   Try to set delay of closed state to some negative number and play a little bit   with the value  You will see the difference It can be made almost to lie the human  eye      It works in major browsers  but good enough for me  It is strange but give some results    expandable       max-height  0px      overflow  hidden      transition  all 1s linear -0 8s     button hover    expandable       max-height  9000px      transition  all 1s ease-in-out

User · Answer

Set the height to auto and transition the max-height   Tested on Chrome v17  div     position  absolute    width 100     bottom 0px    left 0px     background  333    color   FFF     max-height 100          height auto          -webkit-transition  all 0 2s ease-in-out    -moz-transition  all 0 2s ease-in-out    -o-transition  all 0 2s ease-in-out    -ms-transition  all 0 2s ease-in-out    transition  all 0 2s ease-in-out      close     max-height 0

User · Answer

Flexbox Solution  Pros    simple no JS smooth transition   Cons    element needs to be put in a fixed height flex container   The way it works is by always having flex-basis  auto on the element with content  and transitioning flex-grow and flex-shrink instead    Edit  Improved JS Fiddle inspired by the Xbox One interface     x000D   x000D      x000D    margin  0  x000D    padding  0  x000D    box-sizing  border-box  x000D    transition  0 25s  x000D    font-family  monospace  x000D    x000D   x000D  body   x000D    margin  10px 0 0 10px  x000D    x000D   x000D   box   x000D    width  150px  x000D    height  150px  x000D    margin  0 2px 10px 0  x000D    background   2d333b  x000D    border  solid 10px  20262e  x000D    overflow  hidden  x000D    display  inline-flex  x000D    flex-direction  column  x000D    x000D   x000D   space   x000D    flex-basis  100   x000D    flex-grow  1  x000D    flex-shrink  0      x000D    x000D   x000D  p   x000D    flex-basis  auto  x000D    flex-grow  0  x000D    flex-shrink  1  x000D    background   20262e  x000D    padding  10px  x000D    width  100   x000D    text-align  left  x000D    color  white  x000D    x000D   x000D   box hover  space   x000D    flex-grow  0  x000D    flex-shrink  1  x000D    x000D     x000D   box hover p   x000D    flex-grow  1  x000D    flex-shrink  0      x000D    x000D   lt div class  box  gt  x000D     lt div class  space  gt  lt  div gt  x000D     lt p gt  x000D      Super Metroid Prime Fusion x000D     lt  p gt  x000D   lt  div gt  x000D   lt div class  box  gt  x000D     lt div class  space  gt  lt  div gt  x000D     lt p gt  x000D      Resident Evil 2 Remake x000D     lt  p gt  x000D   lt  div gt  x000D   lt div class  box  gt  x000D     lt div class  space  gt  lt  div gt  x000D     lt p gt  x000D      Yolo The Game x000D     lt  p gt  x000D   lt  div gt  x000D   lt div class  box  gt  x000D     lt div class  space  gt  lt  div gt  x000D     lt p gt  x000D      Final Fantasy 7 Remake   All Additional DLC   Golden Tophat x000D     lt  p gt  x000D   lt  div gt  x000D   lt div class  box  gt  x000D     lt div class  space  gt  lt  div gt  x000D     lt p gt  x000D      DerpVille x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    JS Fiddle

User · Answer

Source  This is so late  but for the sake of future researchers  I ll post my answer  I believe most of you looking for height   0 is for the sake of td or tr toggle transition animation or something similar  But it is not possible to make it using just height  max-height  line-height on td or tr  but you can use the following tricks to make it   Wrapping all td contents into div and use height  0   overflow  hidden   white-space  nowrap on divs   and the animation transition of your choice Use transform  scaleY

User · Answer

This is what works for me      hide      max-height  0px      overflow  hidden      transition max-height  5s ease-in-out          show      max-height  150px     adjust as needed     transition  max-height  5s ease-in-out        you need to put them in all your children component and toggle them with jQuery or React state  here s my case  with next js and styled-components   https   codesandbox io s ol3kl56q9q

User · Answer

The Correct Solution  scrollHeight  You should use document getElementById id  style maxHeight   document getElementById id  scrollHeight  px    And in the CSS  transition  max-height 1s ease-in-out

User · Answer

this is what i ve been using   Basically  i get all children elements height  sum them up  and then set the max-height for the element  overriding the class  you can make you own class  so you can have diferent instances    Check it out                                lt  doctype html gt                               lt html gt                                lt head gt                                   lt style gt                                         OVERFLOW HIDDEN                                         overflowHidden                                          overflow  hidden                                                                                HEIGHT                                         transitionHeight                                          -webkit-transition  max-height 250ms ease-in-out                                          -moz-transition  max-height 250ms ease-in-out                                          -o-transition  max-height 250ms ease-in-out                                          -ms-transition  max-height 250ms ease-in-out                                          transition  max-height 250ms ease-in-out                                                                             heightAnimOff                                          height  auto                                          max-height  0px                                                                             heightAnimOn                                          height  auto                                          max-height  20000px                                                                          lt  style gt                                   lt script src  jquery 1 8 3 min js  type  text javascript  gt  lt  script gt                                   lt script type  text javascript  gt                                       function                                                   toggleAnimHeight   function alvo  velha  nova                                                   if     alvo  attr  data-maxHeight      null                                                     else                                                      var totalH   0                                                        alvo  children   each function                                                            totalH      this  height                                                                                                                  alvo  attr  data-maxHeight   totalH                                                         head   append   lt style gt     nova    max-height    totalH  px     lt  style gt                                                                                                                  if     alvo  attr  class   indexOf nova     -1                                                          alvo  removeClass velha                                                         alvo  addClass nova                                                    else                                                         alvo  removeClass nova                                                         alvo  addClass velha                                                                                                                                         jQuery                                     lt  script gt                               lt  head gt                                lt body gt                                   lt div class  animContainer  gt                                       lt button onmousedown    toggleAnimHeight      target1     heightAnimOff    heightAnimOn      gt Anim Toggle lt  button gt                                       lt div id  target1  class  overflowHidden heightAnimOff transitionHeight  gt                                           lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  In id pretium enim  quis faucibus urna  Phasellus blandit nisl eget quam mollis vulputate  Sed pulvinar eros vitae neque volutpat  vitae suscipit urna viverra  Etiam rhoncus purus vitae tortor pulvinar  sed vulputate arcu convallis  Sed porta  mi consectetur convallis semper  odio mauris iaculis purus  non tempor purus augue pharetra lorem  Integer dictum lacus arcu  Vivamus metus lorem  fermentum ac egestas ac  ornare non neque  Aenean ullamcorper adipiscing ante  et mollis orci feugiat et  lt  p gt                                            lt p gt Praesent pretium sit amet eros et lacinia  Etiam nec neque ullamcorper  sagittis quam vitae  dictum ipsum  Sed volutpat lorem libero  nec commodo magna posuere rutrum  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Pellentesque id erat odio  Sed faucibus sem eu tortor laoreet pulvinar  Praesent pharetra risus eget metus vulputate  eget condimentum leo consequat  Praesent consequat rutrum convallis  lt  p gt                                            lt p gt Aenean euismod metus quis libero commodo  tristique cursus odio vestibulum  Donec quis lobortis arcu  eu luctus diam  In eget nisi non mauris commodo elementum  Sed gravida leo consequat  tempus orci eu  facilisis ipsum  Cras interdum sed odio vel tincidunt  Morbi arcu ipsum  ultricies dictum enim quis  varius dignissim massa  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Donec semper  magna eu aliquam luctus  leo purus accumsan massa  at auctor dui dolor eu augue  Maecenas ultrices faucibus ante non mattis  lt  p gt                                            lt p gt Pellentesque ut est tortor  Quisque adipiscing ac nisi vel interdum  Class aptent taciti sociosqu ad litora torquent per conubia nostra  per inceptos himenaeos  Ut facilisis ante sollicitudin vehicula ornare  Quisque sagittis diam nibh  ac imperdiet nibh pulvinar eu  Integer at ipsum a purus tristique porttitor vitae in ante  Sed arcu neque  lacinia eu dolor nec  pellentesque interdum tortor  Morbi ornare aliquet aliquam  Aenean egestas  erat vel tempus mollis  est eros iaculis enim  quis fringilla purus tortor sollicitudin erat  Donec ultrices elit metus  sed iaculis mi dignissim vulputate  Donec adipiscing imperdiet porttitor  Sed ac lacus adipiscing  sagittis sem quis  tincidunt metus  Curabitur vitae augue a dolor scelerisque lobortis ut a nisi  lt  p gt                                            lt p gt Quisque sollicitudin diam sit amet dui sollicitudin  ac egestas turpis imperdiet  Nullam id dui at lectus ultrices aliquam  Nam non luctus tortor  vitae elementum elit  Nullam id bibendum orci  Aliquam hendrerit nisi vitae tortor mollis  nec aliquam risus malesuada  In scelerisque nisl arcu  sit amet tincidunt libero consequat pharetra  Quisque aliquam consectetur purus nec sollicitudin  Pellentesque consectetur eleifend tortor in blandit  Pellentesque euismod justo sed lectus congue  ut malesuada diam rhoncus  Nulla id tempor odio  Nulla facilisi  Phasellus lacinia neque in nisi congue aliquet  Aliquam malesuada accumsan mauris eget mattis  Maecenas pellentesque  sem sed ultricies ullamcorper  massa enim consectetur magna  eget sagittis lorem leo vel arcu  Cras ultrices nunc id risus commodo laoreet  Proin nisl nulla  elementum ac libero sed  aliquam mollis massa  lt  p gt                                       lt  div gt                                   lt  div gt                               lt  body gt                                lt  html gt

User · Answer

As I post this there are over 30 answers already  but I feel my answer improves on the already accepted answer by jake   I was not content with the issue that arises from simply using max-height and CSS3 transitions  since as many commenters noted  you have to set your max-height value very close to the actual height or you ll get a delay  See this JSFiddle for an example of that problem   To get around this  while still using no JavaScript   I added another HTML element that transitions the transform  translateY CSS value   This means both max-height and translateY are used  max-height allows the element to push down elements below it  while translateY gives the  instant  effect we want  The issue with max-height still exists  but its effect is lessened  This means you can set a much larger height for your max-height value and worry about it less   The overall benefit is that on the transition back in  the collapse   the user sees the translateY animation immediately  so it doesn t really matter how long the max-height takes   Solution as Fiddle   x000D   x000D  body   x000D    font-family  sans-serif  x000D    x000D   x000D   toggle   x000D    position  relative  x000D    border  2px solid  333  x000D    border-radius  3px  x000D    margin  5px  x000D    width  200px  x000D    x000D   x000D   toggle-header   x000D    margin  0  x000D    padding  10px  x000D    background-color   333  x000D    color  white  x000D    text-align  center  x000D    cursor  pointer  x000D    x000D   x000D   toggle-height   x000D    background-color  tomato  x000D    overflow  hidden  x000D    transition  max-height  6s ease  x000D    max-height  0  x000D    x000D   x000D   toggle hover  toggle-height   x000D    max-height  1000px  x000D    x000D   x000D   toggle-transform   x000D    padding  5px  x000D    color  white  x000D    transition  transform  4s ease  x000D    transform  translateY -100    x000D    x000D   x000D   toggle hover  toggle-transform   x000D    transform  translateY 0   x000D    x000D   lt div class  toggle  gt  x000D     lt div class  toggle-header  gt  x000D      Toggle  x000D     lt  div gt  x000D     lt div class  toggle-height  gt  x000D       lt div class  toggle-transform  gt  x000D         lt p gt Content  lt  p gt  x000D         lt p gt Content  lt  p gt  x000D         lt p gt Content  lt  p gt  x000D         lt p gt Content  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  toggle  gt  x000D     lt div class  toggle-header  gt  x000D      Toggle  x000D     lt  div gt  x000D     lt div class  toggle-height  gt  x000D       lt div class  toggle-transform  gt  x000D         lt p gt Content  lt  p gt  x000D         lt p gt Content  lt  p gt  x000D         lt p gt Content  lt  p gt  x000D         lt p gt Content  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I got this working by setting the max-height to none  getting the height  re-set the max-height to the calculated height  Works prefectly for me  I got this working for an accordeon menu  with  lt h5 gt  s as the toggler expanding the  lt div gt  inside the  lt div gt    JS      h5   click function e        this  parent  div   addClass  temp expanded      var getheight      this  parent  div   find  div   height         this  parent  div   removeClass  temp expanded        this  parent  div   find  div   css  max-height   getheight         LESS   div    gt  div       max-height  0px      overflow  hidden       transition all 0 3s ease-in-out       amp  temp expanded        gt  div           max-height  none

User · Answer

I realize this thread is getting old  but it ranks high on certain Google searches so I figure it s worth updating   You also just get set the element s own height   var load height   document getElementById  target box   clientHeight  document getElementById  target box   style height   load height    px     You should dump this Javascript immediately after target box s closing tag in an inline script tag

User · Answer

I just animated the  lt li gt  element instead of the whole container    lt style gt   menu       border  solid     menu ul li       height  0px      transition  height 0 3s      overflow  hidden    button hover    wrapper  menu ul li  button focus    wrapper  menu ul li   menu hover ul li       height  20px     lt  style gt     lt button gt Button lt  button gt   lt div class  wrapper  gt       lt div class  menu  gt           lt ul gt               lt li gt menuitem lt  li gt               lt li gt menuitem lt  li gt               lt li gt menuitem lt  li gt               lt li gt menuitem lt  li gt               lt li gt menuitem lt  li gt               lt li gt menuitem lt  li gt           lt  ul gt       lt  div gt   lt  div gt    you can add ul  margin 0   to have 0 height

User · Answer

Ok  so I think I came up with a super simple answer    no max-height  uses relative positioning  works on li elements   amp  is pure CSS  I have not tested in anything but Firefox  though judging by the CSS  it should work on all browsers   FIDDLE  http   jsfiddle net n5XfG 2596   CSS   wrap   overflow hidden      inner               margin-top -100       -webkit-transition margin-top 500ms              transition margin-top 500ms      inner open   margin-top 0px      HTML   lt div class  wrap  gt       lt div class  inner  gt Some Cool Content lt  div gt   lt  div gt

User · Answer

The max-height solution from Jake works well  if the hard-coded max-height value supplied is not much bigger than the real height  because otherwise there are undesirable delays and timing problems   On the other hand if the hard-coded value accidentially is  not bigger than the real height the element won t open up completely   The following CSS only solution also requires a hard-coded size that should be bigger than most of the occurring real sizes   However this solution also works if the real size is in some situations bigger than the hard-coded size  In that event the transition might jump a bit  but it will never leave a partially visible element  So this solution could also be used for unknown content  e g  from a database  where you just know that the content is usually not bigger than x pixels  but there are exceptions   Idea is to use a negative value for margin-bottom  or margin-top for a slightly diffenrent animation  and to place the content element into a middle element with overflow hidden  The negative margin of the content element so reduces the height of the middle element   The following code uses a transition on margin-bottom from -150px to 0px   This alone works fine as long as the content element is not higher than 150px  In addition it uses a transition on max-height for the middle element from 0px to 100    This finally hides the middle element if the content element is higher than 150px  For max-height the transition is just used to delay its application by a second when closing  not for a smooth visiual effect   and therefore it can run from  0px to 100     CSS    content     transition  margin-bottom 1s ease-in    margin-bottom  -150px     outer hover  middle  content     transition  margin-bottom 1s ease-out    margin-bottom  0px    middle     overflow  hidden    transition  max-height  1s ease 1s    max-height  0px    outer hover  middle     transition  max-height  1s ease 0s    max-height  100      HTML    lt div class  outer  gt     lt div class  middle  gt       lt div class  content  gt        Sample Text        lt br gt  Sample Text        lt br gt  Sample Text        lt div style  height 150px  gt Sample Test of height 150px lt  div gt        Sample Text      lt  div gt     lt  div gt    Hover Here  lt  div gt    The value for margin bottom should be negative and as close as possible to the real height of the content element  If it  s absoute value  is bigger there are similar delay and timing problems as with the max-height solutions  which however can be limited as long as the hard coded size is not much bigger than the real one  If the absolute value for margin-bottom is smaller than the real height the  tansition jumps a bit  In any case after the transition the content element is either fully displayed or fully removed   For more details see my blog post http   www taccgl org blog css transition display html combined height

User · Answer

There seems to be no proper solution  max-height approach is quite good but doesn t work well for the hide phase - there will be a noticeable delay unless you know the height of the content    I think the best way is to use max-height but only for the show phase  And not to use any animation on hiding  For most cases it shouldn t be crucial    max-height should be set to a quite huge value to ensure any content fits  Animation speed can be controlled using transition duration  speed   max-height   duration   Speed does not depend on the size of the content  The time it takes to show the whole content will depend on its size    x000D   x000D  document querySelector  button   addEventListener  x000D     click    x000D    function    x000D      document querySelector  div   classList toggle  hide    x000D      x000D    x000D  div       x000D      max-height  20000px  x000D      transition  max-height 3000ms  x000D      overflow-y  hidden  x000D    x000D   x000D   hide   x000D      max-height  0  x000D      transition  none  x000D    x000D   lt button gt Toggle lt  button gt  x000D   lt div class  hide  gt Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne  Lorem ipsum dolor sit amet  ius solet dignissim honestatis ad  Mea quem tibique intellegat te  Insolens deterruisset cum ea  Te omnes percipit consulatu eos  Vix novum primis salutatus no  eam denique sensibus et  his ipsum senserit ne   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You should use scaleY instead    x000D   x000D  ul   x000D    background-color   eee  x000D    transform  scaleY 0       x000D    transform-origin  top  x000D    transition  transform 0 26s ease  x000D    x000D  p hover   ul   x000D    transform  scaleY 1   x000D    x000D   lt p gt Hover This lt  p gt  x000D   lt ul gt  x000D     lt li gt Coffee lt  li gt  x000D     lt li gt Tea lt  li gt  x000D     lt li gt Milk lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    I ve made a vendor prefixed version of the above code on jsfiddle   and changed your jsfiddle to use scaleY instead of height

User · Answer

I understand the question asks for a solution without JavaScript  But for those interested here s my solution using just a little bit of JS   ok  so the element s css whose height will change by default is set to height  0  and when open height  auto   It also has transition  height  25s ease-out   But of course the problem is that it won t transition to or from height  auto   So what i ve done is when opening or closing set the height to the scrollHeight property of the element  This new inline style will have higher specificity and override both height  auto  and height  0  and the transition runs   When opening i add a transitionend event listener which will run just once then remove the inline style setting it back to height  auto  which will allow the element to resize if necessary  as in this more complex example with sub menus https   codepen io ninjabonsai pen GzYyVe  When closing i remove the inline style right after the next event loop cycle by using setTimeout with no delay  This means height  auto  is temporarily overridden which allows the transition back to height 0    x000D   x000D  const showHideElement    element  open    gt    x000D    element style height   element scrollHeight    px   x000D    element classList toggle  open   open   x000D   x000D    if  open    x000D      element addEventListener  transitionend        gt    x000D        element style removeProperty  height    x000D           x000D        once  true x000D          x000D      else   x000D      window setTimeout      gt    x000D        element style removeProperty  height    x000D          x000D      x000D    x000D   x000D  const menu   document body querySelector   menu    x000D  const list   document body querySelector   menu  gt  ul   x000D   x000D  menu addEventListener  mouseenter        gt  showHideElement list  true    x000D  menu addEventListener  mouseleave        gt  showHideElement list  false    x000D   menu gt ul   x000D    height  0  x000D    overflow  hidden  x000D    background-color   999  x000D    transition  height  25s ease-out  x000D    x000D   x000D   menu gt ul open   x000D    height  auto  x000D    x000D   lt div id  menu  gt  x000D     lt a gt hover me lt  a gt  x000D     lt ul gt  x000D       lt li gt item lt  li gt  x000D       lt li gt item lt  li gt  x000D       lt li gt item lt  li gt  x000D       lt li gt item lt  li gt  x000D       lt li gt item lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I think I came up with a really solid solution  OK  I know this problem is as old as the internet but I think I have a solution which I turned into a plugin called mutant-transition  My solution sets the style    attributes for tracked elements whenever theres a change in the DOM  the end result is that you can use good ole CSS for your transitions and not use hacky fixes or special javascript  The only thing you have to do is set what you want to track on the element in question using data-mutant-attributes  X      lt div data-mutant-attributes  height  gt                                                                                This is an example with mutant-transition                                                                                                                lt  div gt    Thats it  This solution uses MutationObserver to follow changes in the DOM  Because of this  you don t really have to set anything up or use javascript to manually animate things  Changes are tracked automatically  However  because it uses MutationObserver  this will only transition in IE11     Fiddles    Demonstrating transitioning from height  auto to height  100  Demonstrating transitioning height  auto when adding children

User · Answer

There was little mention of the Element prototype scrollHeight property which can be useful here and still may be used with a pure CSS transition  although scripting support would obviously be required  The property always contains the  quot full quot  height of an element  regardless of whether and how its content overflows as a result of collapsed height  e g  height  0   As such  for a height  0  effectively fully collapsed  element  its  quot normal quot  or  quot full quot  height is still readily available through its scrollHeight value  invariably a pixel length   For such an element  assuming it already has the transition set up like e g   using ul as per original question   ul       height  0      transition  height 1s     An example transition        We can trigger desired animated  quot expansion quot  of height  using CSS only  with something like the following  here assuming ul variable refers to the list   ul style height   ul scrollHeight    quot px quot    That s it  If you need to collapse the list  either of the two following statements will do  ul style height    quot 0 quot   ul style removeProperty  quot height quot     My particular use case revolved around animating lists of unknown and often considerable lengths  so I was not comfortable settling on an arbitrary  quot large enough quot  height or max-height specification and risking cut-off content or content that you suddenly need to scroll  if overflow  auto  for example   Additionally  the easing and timing is broken with max-height-based solutions  because the used height may reach its maximum value a lot sooner than it would take for max-height to reach 9999px  And as screen resolutions grow  pixel lengths like 9999px leave a bad taste in my mouth  This particular solution solves the problem in an elegant manner  in my opinion  Finally  here is hoping that future revisions of CSS address authors  need to do these kind of things even more elegantly -- revisit the notion of  quot computed quot  vs  quot used quot  and  quot resolved quot  values  and consider whether transitions should apply to computed values  including transitions with width and height  which currently get a bit of a special treatment

User · Answer

LITTLE JAVASCRIPT   SCSS SOLUTION  I usually use a quite different point of view and a  very  little javascript  The thing is     what we really want is change height The height is the sum of all list items inside the submenu We usually know the height of a list item  since we re styling it    So my solution applies to  normal  submenus where items names have only 1 row  Anyway  with a little more js one could accomodate even more than 1 row names   Basically  what I do is simply count the submenus items and apply specific classes accordingly  Then pass the ball to  s css  So  for example   var main menu       main-menu    var submenus       main-menu   find   submenu    submenus each function index item      var i     item      i addClass  has-    i find  li   length    -children          You can use any class selector  obviously  At this point we have submenus like this    lt ul class  submenu has-3-children  gt      lt li gt  lt  li gt      lt li gt  lt  li gt      lt li gt  lt  li gt   lt  ul gt    And our css like this    submenu       your styles          height 0     overflow hidden     transition  all 200ms ease-in-out    assume Autoprefixer is used     We will also have some scss variables like these  arbitrary example     sub item height 30px   sub item border 2px    At this point  assumed that opened main menu items will get a class like  opened  or the like  your implemetations     we can do something like this     use a number of children reasonably high so it won t be overcomed by real buttons  main-menu  opened  submenu      amp  has-1-children  height     sub item height 1     sub item border 1         amp  has-2-children  height     sub item height 2     sub item border 2         amp  has-3-children  height     sub item height 3     sub item border 3          and so on         Or  to shorten up    main-menu  opened  submenu      for  i from 1 through 12   12 is totally arbitrary        amp  has-   i -children   height   menu item height    i    menu item border    i             For most of the times  this will do the job  Hope it helps

User · Answer

I ve been looking at this issue for a while today and came across this solution   Use max-height and dynamically set the max-height based upon the calculated height of the contents of the container    obj  children   each function index  element       InnerHeight      this  height          to animate to full size     obj  removeClass  collapsed   css  max-height   InnerHeight     to animate to smaller size     obj  removeClass  collapsed   css  max-height   MySmallerHeight     use CSS3 transition max-height    This way you avoid the glitchy looking animation from way to large of a height AND you dont run the risk of clipping your content

User · Answer

I have not read everything in detail but I have had this problem recently and I did what follows   div class     min-height 1      max-height 200px     -webkit-transition  all 0 5s ease     -moz-transition  all 0 5s ease     -o-transition  all 0 5s ease     -webkit-transition  all 0 5s ease     transition  all 0 5s ease     overflow hidden     div class hover     min-height 100      max-height 3000px      This allows you to have a div that at first shows content up to 200px height and on hover it s size becomes at least as high as the whole content of the div  The Div does not become 3000px but 3000px is the limit that I am imposing  Make sure to have the transition on the non  hover  otherwise you might get some strange rendering  In this way the  hover inherits from the non  hover    Transition does not work form px to   or to auto  You need to use same unit of measure  This works fine for me  Using HTML5 makes it perfect      Remember that there is always a work around         Hope someone finds this useful

User · Answer

You could do this by creating a reverse  collapse  animation with clip-path    x000D   x000D   child0   x000D      display  none  x000D    x000D   parent0 hover  child0   x000D      display  block  x000D      animation  height-animation  x000D      animation-duration  200ms  x000D      animation-timing-function  linear  x000D      animation-fill-mode  backwards  x000D      animation-iteration-count  1  x000D      animation-delay  200ms  x000D    x000D   keyframes height-animation   x000D      0    x000D          clip-path  polygon 0  0   100  0 00   100  0   0  0    x000D        x000D      100    x000D          clip-path  polygon 0  0   100  0 00   100  100   0  100    x000D        x000D    x000D   lt div id  parent0  gt  x000D       lt h1 gt Hover me  height  0  lt  h1 gt  x000D       lt div id  child0  gt Some content x000D           lt br gt Some content x000D           lt br gt Some content x000D           lt br gt Some content x000D           lt br gt Some content x000D           lt br gt Some content x000D           lt br gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] How can I transition height: 0; to height: auto; using CSS?

Examples related to css

Examples related to css-transitions