Q:

JQuery Draggable Element Change On Drop

I have a list of items that look like this:
<div id="draggablearea">
    <ul>
        <li><div class="title">Title 1</div>
            <div class="content">Content 1.  Probably a few hundred characters</div></li>
        <li> ... </li>
    </ul> 
</div>

The "content" div is not visible, because my css includes this:
#content {display: none;}

Now, I've made them draggable using jquery-ui:
$(function(){
    $("#draggablearea li").draggable();
    .... (setting up droppable stuff)

So far, so good: everything is appearing on my draggable list, and is moving onto my droppable area as expected.
Now, I want to change the functionality so that on the drop event, the title becomes invisible, and the content becomes visible.  
I've tried this:
$("#droppableArea").droppable({
    accept: "#draggablearea li",
    drop: function(event, ui){
        ui.draggable.children(".content").appendTo(this);
    }
});

But it's not working.  What's the right way to do this?
(The whole li is moved to the droppable area when the appendTo() is called on the whole ui.draggable object.)

A:

Perhaps something more like this?
$("#droppableArea").droppable({
    accept: "#draggablearea li",
    drop: function(event, ui){
        ui.draggable.children(".title").hide();
        ui.draggable.children(".content").show();
    }
});

