Sometimes, we want to add slide down animation from display:none to display:block with JavaScript.

In this article, we’ll look at how to add slide down animation from display:none to display:block with JavaScript.

How to add slide down animation from display:none to display:block with JavaScript?

To add slide down animation from display:none to display:block with JavaScript, we can use the jQuery hide and slideDown methods.

For instance, we write:

<p>
  hello
</p>

to add a p element.

Then we write:

$('p').stop().css('display', 'block').hide().slideDown();

to select the p element.

Then we call stop to stop the element.

Next, we call css to set the display CSS property to block.

And then we call hide to hide it.

Finally, we call slideDown to make the p element slide down.

Conclusion

To add slide down animation from display:none to display:block with JavaScript, we can use the jQuery hide and slideDown methods.