Jquery AppendTo Toggle?

[shortysbest]

I want to appendTo a div from a list of names. (like adding them to an email) However I am having troubles with making it so when you click on it the first time it adds them to email, then you click on the same tag (which was appendedTo a div) it appends back to original container (which removes them from email), and so on as many times as the user may do so. Right now the script I use only allows it to do this process twice then it doesn't work, of course if I added more of the events it would do so longer.

 

$(document).ready(function(){
					   

$(".group-video-select-friends li").click(function(){
$(this).appendTo(".group-input-names");

$(".group-input-names li").click(function(){
$(this).appendTo(".group-video-select-friends");

$(".group-video-select-friends li").click(function(){
$(this).appendTo(".group-input-names");


$(".group-input-names li").click(function(){
$(this).appendTo(".group-video-select-friends");
									  });
  });
});
});

 

Notice how it has to be, the next set of clicks needs to be inside the ({ }) tags each time.

 

[gizmola]

You are on the wrong track.  Just for stylistic reasons, I changed the use of classes to id's, but that is not the main problem.  Try this instead:

 

function moveTo(){
  $id = $(this).closest("ul").attr("id");
  if ($id == 'group-video-select-friends') {
    $(this).appendTo("#group-input-names");
  } else {
$(this).appendTo("#group-video-select-friends");
  }
}

$(document).ready(function(){
$("#group-video-select-friends li").click(moveTo);
$("#group-input-names li").click(moveTo);
});

 

Make sure that you're ul's use the id's named.

 

 group-video-select-friends
</pre>
<ul id="group-video-select-friends">
Bob
Ted
Carol
Alice
</ul>
<br><br><h3>group-input-names</h3>
<br><ul id="group-input-names">
</ul

 

 

[shortysbest]

Excellent, thanks. That was too easy of a fix .