5

I am trying to create a fieldset that will append a file input field to a div AND use the slidedown() function to show the newly created field. This simple code does exactly what I need to do but I can't figure out how to integrate the slidedown action. I did come up with a solution that is almost there by hiding div#add_pic, appending the new field, then slidedown()ing it but it looks really bad. Does anyone have an elegant solution for this? Thanks!!

function add_file_input() {

$('div#add_pic').append("<label>Artist Pic:</label><input type='file' name='pics[]'><br     />");

}

$(document).ready(function(){

$('a#add_field').click(add_file_input);

})
Henry
  • 3,447
  • 1
  • 15
  • 12
  • 1
    As an aside: `$('a#add_field')` should probably be: `$('#add_field')`. An id is unique so there's no need to include anything else and jQuery will be able to find it faster (using `document.getElementById()`) if there is nothing other than just the ID in the selector. Same with `$('div#add_pic')` should be `$('#add_pic')`. – jfriend00 Sep 15 '11 at 18:21

1 Answers1

10

Im not sure of the exact HTML Layout but I would wrap what you are appending in another div that is hidden then slide the newly added div down. like this

function add_file_input() {

   $('div#add_pic').append("<div class="addedDiv" style="display:none"><label>Artist Pic:</label><input type='file' name='pics[]'><br     /></div>");
   $('div.addedDiv').slideDown("slow");

}

$(document).ready(function(){

   $('a#add_field').click(add_file_input);

})
John Hartsock
  • 85,422
  • 23
  • 131
  • 146
  • Wow, that worked brilliantly. I thought I would have to add a :last selector so that it would only slideDown the last div added but it works just as you described. When I started messing with counters I had a feeling I was doing it wrong. Thanks a lot John! – Henry Sep 15 '11 at 18:28
  • This looks very elegant. I don't know if anyone is around since this post is 2 years old. But I am trying to append data to a table layout of items added to a shopping cart. Any way to do this? Putting tr and td in a div isn't going to work. Thanks! – Chris22 Nov 05 '13 at 09:06
  • @Chris22 your asking if its possible to add a tr and have it animate to slide down? – John Hartsock Nov 05 '13 at 15:35
  • @Chris if you are trying to animate a tr...then here is a useful link. http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row – John Hartsock Nov 05 '13 at 15:53