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 bine it with slideDown?

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 bine it with slideDown?

• javascript
• jquery
• slidedown
• jquery-after

• Please expand your example code. Show us your HTML and the JS event you're using. – Kristen Grote Commented Oct 24, 2012 at 16:42
• 2 $('.myDiv').hide().after('<div>added content</div>').slideDown(); – Reinstate Monica Cellio Commented Oct 24, 2012 at 16:43
• @Archer: Almost. .after returns the .myDiv, not the new element. – gen_Eric Commented Oct 24, 2012 at 16:46

4 Answers 4

Try this instead :

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

Good Luck !!

Try this out:

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

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();

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();
});