Hi Gang, I've been wasting time trying to figure this out to no avail. Here's my function:
//Toggle $("#type_new").hide(); toggle = function(){ $("a.toggle").unbind('click').click(function(){ var aIndex = $("a#type").index(this); if($("#type_new:eq("+aIndex+")").is(':visible')==true) $("a#type small:eq("+aIndex+")").html("Add New Type"); else $("a#type small:eq ("+aIndex+")").html("Choose From Exisiting Types"); $("#type:input:eq("+aIndex+")").toggle(); $("#type_new:eq("+aIndex+")").toggle().val(""); }); }; toggle(); //Add Contact $(".addItem").click(function(){ $("#addContact").load("ajax/addContact.php", '', function(){ $.thisIndex = $("tbody").index(this); $(this).find("#type_new").hide(); $(this).attr("id", "newContact" + $("tbody").index(this)).addClass ("highlight").after('<tbody id="addContact"></tbody>'); $("tbody:not('#newContact"+$.thisIndex+"')").removeClass ("highlight"); toggle(); }) }); It's a toggle between a select box and a text input for users to select from the list or create a new type. When I load a new section into the table it then has another (new) type select and input. On the newly created set the index comes up at 1 (rather than zero) but that's when I get stuck. The Text changes in the <small> tag to "Choose from existing types" but the inputs don't toggle. Here's what my HTML looks like. Imagine two of these after the load event: <tr> <th>Type of Organization</th> <td> <select name="type" id="type"> <option>Church</option> <option>College</option> <option>Theatre</option> </select> <input name="type_new" id="type_new" type="text" / > </td> </tr> <tr> <th> </th> <td><a class="toggle" id="type"><small>Add New Type</small></a></ td> </tr> Any thoughts or suggestions would help immensely.