I’ll introduce a solution for when jQuery’s slideDown() animation doesn’t work.

It works fine for normal usage, but when using it with nested div structures, calling slideDown() doesn’t animate and it displays instantly like calling show().

Below, I’ll show the HTML where animation didn’t work and the JavaScript code that solved it.

Solve with .show().slideDown() method chaining

// First, hide the inner element
$('#content-inner').hide();

// Show the outer element first, then slideDown()
$('#content-outer').show().slideDown();

// Finally, slideDown() the inner element too
$('#content-inner').slideDown();

slideUp() is used normally

$('#content-outer').slideUp();
$('#content-inner').slideUp();

---

Reference Information

・javascript - jQuery slideDown() animation not working - Stack Overflow

・codeigniter - JQuery slidedown effect not working? - Stack Overflow

・slideDown([speed], [callback]) - jQuery 日本語リファレンス

・slideUp([speed], [callback]) - jQuery 日本語リファレンス

That’s all from the Gemba.