Add CSS3 transition expand collapse

Question

How do I add an expand collapse transition    x000D   x000D  function showHide shID    x000D      if  document getElementById shID     x000D          if  document getElementById shID    -show   style display     none     x000D              document getElementById shID    -show   style display    none   x000D              document getElementById shID  style display    block   x000D            else   x000D              document getElementById shID    -show   style display    inline   x000D              document getElementById shID  style display    none   x000D            x000D        x000D    x000D   more   x000D      display  none  x000D      padding-top  10px  x000D    x000D   x000D  a showLink  x000D  a hideLink   x000D      text-decoration  none  x000D      -webkit-transition  0 5s ease-out  x000D      background  transparent url  down gif   no-repeat left  x000D    x000D   x000D  a hideLink   x000D      background  transparent url  up gif   no-repeat left  x000D    x000D  Here is some text  x000D   lt div class  readmore  gt  x000D       lt a href     id  example-show  class  showLink  onclick  showHide  example   return false   gt Read more lt  a gt  x000D       lt div id  example  class  more  gt  x000D           lt div class  text  gt Here is some more text  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Vestibulum vitae urna nulla  Vivamus a purus mi  In hac habitasse platea dictumst  In ac tempor quam  Vestibulum eleifend vehicula ligula  et cursus nisl gravida sit amet  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  lt  div gt  x000D           lt p gt  lt a href     id  example-hide  class  hideLink  onclick  showHide  example   return false   gt Hide lt  a gt  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net Bq6eK 1

User · Answer

this should work  had to try a while too    D   x000D   x000D  function showHide shID    x000D    if  document getElementById shID     x000D      if  document getElementById shID    -show   style display     none     x000D        document getElementById shID    -show   style display    none   x000D        document getElementById shID    -hide   style display    inline   x000D        document getElementById shID  style height    100px   x000D        else   x000D        document getElementById shID    -show   style display    inline   x000D        document getElementById shID    -hide   style display    none   x000D        document getElementById shID  style height    0px   x000D        x000D      x000D    x000D   example   x000D    background  red  x000D    height  0px  x000D    overflow  hidden  x000D    transition  height 2s  x000D    -moz-transition  height 2s  x000D       Firefox 4    x000D    -webkit-transition  height 2s  x000D       Safari and Chrome    x000D    -o-transition  height 2s  x000D       Opera    x000D    x000D   x000D  a showLink  x000D  a hideLink   x000D    text-decoration  none  x000D    background  transparent url  down gif   no-repeat left  x000D    x000D   x000D  a hideLink   x000D    background  transparent url  up gif   no-repeat left  x000D    x000D  Here is some text  x000D   lt div class  readmore  gt  x000D     lt a href     id  example-show  class  showLink  onclick  showHide  example   return false   gt Read more lt  a gt  x000D     lt div id  example  class  more  gt  x000D       lt div class  text  gt  x000D        Here is some more text  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Vestibulum vitae urna nulla  Vivamus a purus mi  In hac habitasse platea dictumst  In ac tempor quam  Vestibulum eleifend vehicula ligula  et cursus nisl gravida sit amet  x000D        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  x000D       lt  div gt  x000D       lt p gt  x000D         lt a href     id  example-hide  class  hideLink  onclick  showHide  example   return false   gt Hide lt  a gt  x000D       lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

http   jsfiddle net Bq6eK 215   I did not modify your code for this solution  I wrote my own instead  My solution isn t quite what you asked for  but maybe you could build on it with existing knowledge  I commented the code as well so you know what exactly I m doing with the changes   As a solution to  avoid setting the height in JavaScript   I just made  maxHeight  a parameter in the JS function called toggleHeight  Now it can be set in the HTML for each div of class expandable   I ll say this up front  I m not super experienced with front-end languages  and there s an issue where I need to click the  Show hide  button twice initially before the animation starts  I suspect it s an issue with focus   The other issue with my solution is that you can actually figure out what the hidden text is without pressing the show hide button just by clicking in the div and dragging down  you can highlight the text that s not visible and paste it to a visible space   My suggestion for a next step on top of what I ve done is to make it so that the show hide button changes dynamically  I think you can figure out how to do that with what you already seem to know about showing and hiding text with JS

User · Answer

This is my solution that adjusts the height automatically    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    document getElementById  more-button   value   document getElementById  more-button   value     Read more     Read less     Read more   x000D    x000D   more-button   x000D    border-style  none  x000D    background  none  x000D    font  16px Serif  x000D    color  blue  x000D    margin  0 0 10px 0  x000D    x000D   x000D   grow input checked   x000D    color  red  x000D    x000D   x000D   more-button hover   x000D    color  black  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    x000D   lt input type  button  onclick  growDiv    value  Read more  id  more-button  gt  x000D   x000D   lt div id  grow  gt  x000D     lt div class  measuringWrapper  gt  x000D       lt div class  text  gt Here is some more text  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Vestibulum vitae urna nulla  Vivamus a purus mi  In hac habitasse platea dictumst  In ac tempor quam  Vestibulum eleifend vehicula ligula  et cursus nisl gravida sit x000D        amet  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D     I used the workaround that r3bel posted  Can you use CSS3 to transition from height 0 to the variable height of content

User · Answer

OMG  I tried to find a simple solution to this for hours  I knew the code was simple but no one provided me what I wanted  So finally got to work on some example code and made something simple that anyone can use no JQuery required  Simple javascript and css and html  In order for the animation to work you have to set the height and width or the animation wont work  Found that out the hard way    lt script gt          function dostuff                 if  document getElementById  MyBox   style height     0px                      document getElementById  MyBox   setAttribute  style    background-color   45CEE0  height  200px  width  200px  transition  all 2s ease                                else                   document getElementById  MyBox   setAttribute  style    background-color   45CEE0  height  0px  width  0px  transition  all 2s ease                                    lt  script gt       lt div id  MyBox  style  height  0px  width  0px   gt       lt  div gt        lt input type  button  id  buttontest  onclick  dostuff    value  Click Me  gt

User · Answer

Here s a solution that doesn t use JS at all  It uses checkboxes instead   You can hide the checkbox by adding this to your CSS    container input      display  none      And then add some styling to make it look like a button   Here s the source code that I modded

[javascript] Add CSS3 transition expand/collapse

Examples related to javascript

Examples related to html

Examples related to css