JavaScript slidedown without jQuery

by

Since we are in 2014, why not use CSS transitions and just change the height property of the element?
Fiddle

CSS:

.wrapper {
    transition:height 1s ease-out;
    height:0;
    overflow:hidden;
}

HTML:

<div id="wrapper">
//content
</div>

JAVASCRIPT:

document.getElementById("wrapper").style.height = //content height +"px";

2020 EDIT (dealing with unknown height):

So we’re in 2020 and it’s even more obvious now we should rely on CSS effects for this kind of animations.

However, a valid point has been made against this answer – you need to specify the height of the element that you’re animating in the js code, and you might not know this value in advance.

So six years later, I’m adding a couple extra lines of code to cover this case.

So if we use the same CSS and HTML as in our old 2014 example, this is the new JS.
New Fiddle!

const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;

slideDown(document.getElementById("wrapper"));

More Related Contents:

  1. How does the “this” keyword in Javascript act within an object literal? [duplicate]
  2. navigator.geolocation.getCurrentPosition sometimes works sometimes doesn’t
  3. How do I remove a file from the FileList
  4. Remove not alphanumeric characters from string
  5. Prevent text selection after double click
  6. Browser-independent way to detect when image has been loaded
  7. ReactJS call parent method
  8. How to invert (transpose) the rows and columns of an HTML table?
  9. Cross-origin data in HTML5 canvas
  10. Javascript change date into format of (dd/mm/yyyy) [duplicate]
  11. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  12. How to write regex to validate dates?
  13. How to get the value of an input field using ReactJS?
  14. Angular 4 pass data between 2 not related components
  15. Access variable outside function scope [duplicate]
  16. What is the difference between jQuery’s mouseout() and mouseleave()?
  17. How to select a range of elements in jQuery
  18. contentDocument for an iframe
  19. JavaScript difference between function and new function
  20. How To Solve The React Hook Closure Issue?
  21. Javascript: how to pass parameters to callback function [duplicate]
  22. Pagination: Server Side or Client Side?
  23. Proper way to reset a GIF animation with display:none on Chrome
  24. Is a closure for dereferencing variables useful?
  25. Replacing accented characters with plain ascii ones [duplicate]
  26. Is document.write actually deprecated?
  27. Three.JS wireframe material – all polygons vs. just edges
  28. Execute JavaScript after every JSF ajax postback
  29. Add CSS styled marker to google maps
  30. Change/Get check state of CheckBox

Leave a Comment