Combine after() and slideDown()

Question

I am adding an element on a certain condition. But I don't want it suddenly appear but rather would like to slide it down. Here's how I add it:

$('.myDiv').after('<div>added content</div>'); 

How do I combine it with slideDown?

Answer 1

Try this instead :

$(".myDiv").after("<div style='display:none;'>added content</div>"); 
$(".myDiv").next("div").slideDown();

Good Luck !!

Answer 2

Try this out:

$('.myDiv').after('<div style="display:none">added content</div>').next().slideDown();

Answer 3

You need to use .next() on the div to which it is attached because .after()... adds the element as a sibling to the div to which it is added

Try this

$('.myDiv').after('<div style="display:none;" class="newDiv">New Content</div>'); 

$('.myDiv').next('.newDiv').slideDown();

Answer 4

first make sure the new content that you input is hidden using .newdiv{display:none;} either in your css file or inline code like: <div style="display:none;">

then use a callback function to only start after the code was inserted in the document when you used the after() method.

$('.myDiv').after('<div class="newdiv">added content</div>', function(){
    $('.newdiv').slideDown();
});